Hi Ashton,

Thank you for getting in touch with us. My name is John, and I'm happy to assist you today. I appreciate your patience while we've been working towards your ticket.

That template animates the fish layers with a transition type called Loop or Middle Transition. The relevant values are set with the Offset X and Y values. They use custom units instead of pixels called "sw" and "sh", which correspond to the slider's width and height percentage. You can use other units as well if you'd like. 

Since LayerSlider supports many layout options and is responsive to adapt to any screen size, there's little reason to change the canvas size unless you want to use a different aspect ratio. When you resize the canvas, it does require some adjustments.

The Aquarium template uses a responsive layout by default, so unless you've changed that, it should automatically adjust its size on the embedded page to the available free space, so it's the right layout mode when you have a WordPress theme that uses a boxed layout.

We're planning to make tutorial videos in the near future. I'd recommend checking out our help assets, and we also offer very simple templates that are a great way to learn using LayerSlider.

Based on your description, it's not clear what you'd like to achieve. Can you please describe it in more detail?

Hi Ashton,

I'm sorry for the late reply due to the weekend.

I'd recommend adding two separate layers for the text and the image. After inserting the text and image layers, you can grab them in the editor and move them to their intended positions, as well as resize or make any additional adjustments. You can further customize their appearance under the STYLES menu. 

It's important to note that the appearance you set in this step is the "normal state" of layers, and they will be animating toward these style settings from the Opening Transition or Opening Text Transition. It basically means that on the project canvas, you're making the appearance they will have after finishing their transitions and layers animated into their place.

The next step would be to set an Opening Transition. As mentioned above, here you're setting the layers' initial position from which they will animate toward the appearance set under the STYLE menu. For example, suppose you enter -100px into the Offset X field. In that case, it means the layer's initial horizontal position will be shifted -100 pixels toward the left side, and it will slide 100pixels to the right side during the opening transition until it reaches the position you've designed in the editor.

If you'd like to have multiple rotating images, you can continue to add multiple image layers and repeat the process. One key thing is layer timings. You need to ensure that the first image goes out of the scene before the new one takes its place. 

You can animate out a layer by selecting the Ending Transition, then scroll down a bit into the Transition Properties section, where you can see a "Start when" field. Select "Opening Transition completes" or any other appropriate option, then in the row below, enter the time while the layer should be visible after it completes its Opening Transition. This value is in milliseconds, so the value 5000 means it will be visible for 5 seconds after its initial transition.

Then you'd need to delay the second image Opening Transition with a similar amount, which you can do by selecting the Opening Transition from the blue dropdown menu, then in the Transition Properties section, use the "Start at" field. This option also expects a time amount in milliseconds. 

Please keep in mind that transitions also have a duration value, which you can edit, and you need to take that into account when you want to delay layers. The second layer's "Start at" value should be the first layer's delay + transition duration + any time difference you want to have between the layers that replace each other.

The easiest way would be to duplicate the slides used in that template, and then you can replace the text/images with your own. The only thing you should keep in mind is that the offset X values of the image layers have to be updated under Loop Transition. You can calculate the appropriate value by subtracting the image width from the project canvas width value. The project canvas is 1440px wide by default, so if you're using an image that's 2000 pixels wide, then the proper value would be -560px.

We have very similar slide transitions that you can select under the SLIDE → Timing & Transition menu with the Select Transitions button.

I'm not exactly sure what you mean. That template already uses a crossfade effect on the images.

You can have a different transition between each slide or select multiple ones, and LayerSlider will randomize them. You can also build custom slide transitions with the Transition Builder, which you can access from LayerSlider's main admin screen under the [...] menu.