Crossfade between two images?

Hi,

Yes this can be done.

Create page with the first image. Add the same image to the first page multiple times to be able to control exactly when the fade starts and stops ie. how long the first image will be displayed before it starts to fade in/out.

Create second page with the second image. Add the same image to the second page multiple times again.

Then the final step is to specify the starting and ending image number and create a fade from and fade to animations on both pages. Use .scrollsequence-canvas CSS selector to fade in and out the images. To animate it, simply add Fade in and Fade out animations on both pages accordingly.

Please let me know if this worked for you, so I can close this issue.

Happy animating!

As I haven’t heard from you, I assume that it worked, so I am marking this thread as resolved.

Hi, I’ve tried to do this, but I can’t work it out from your description and I’m getting weird results.
Targeting the .scrollsequence-canvas class seems to be a sort of hack/ workaround, so it makes the standard options very confusing.
All I want to do is start with image(a) and as the user scrolls down, image(a) should fade out to reveal image(b), or in other words, image(a) crossfades into image(b).

I’ve made a ‘scene’ with image(a) in it. I’ve added a “Fixed Content Animation”, targeting the .scrollsequence-canvas selector

1. What do I put in the “Start” and “End” fields? Do these even apply to what I’m doing?
2. How can the “From Animation” and the “To Animation” both have a duration value?
3. Is there a connection between the animation duration and the “Image duration”?

Ideally, could you please just tell me what values to put in which fields/scenes/etc just so that I can get this to work..?

Thank you

Hi,

Please have a look on the sequence settings below and let me know if it is what you want.

https://ibb.co/F5s7f5G
https://ibb.co/XDqMCB6
https://ibb.co/zhC995s

Let me know if it works!

Ales