Jump to content
Roli

Fade Image Sequence with Scroll Magic and GSAP

Recommended Posts

Hi All!!

 

Thank all of you for reading this and thinking to help me.

 

I'm working with Scroll Magic to get the Image Sequence effect with a fade transition.

 

On this example 

See the Pen gmpdxb%C2 by arol (@arol) on CodePen

(do not change to much)

 

 

Thank you for your help!

 

Cheers

Roli

Share this post


Link to post
Share on other sites

Hi Roli  :)

 

You can make this happen with one tween. I left all three images in the HTML so they'll be stacked on top of each other. I added a class of .fadeIn to the two on top of the stack. I then set that class to autoAlpha:0 to only show the first pic. The rest is handled by one staggerTo() tween which animates the autoAlpha of the .fadeIn class to 1. You'll see that this works well, but the 3rd picture is a different size than the first two so you can see the bottom part of picture two at smaller screen sizes. If all three pictures were the same size, it would work fine for you at all sizes.

// this is all you need
TweenMax.set(".fadeIn", {autoAlpha:0});
var tween = TweenMax.staggerTo(".fadeIn", 1, {autoAlpha:1}, 1);

Here's a fork of your pen.

 

See the Pen YZXgbJ by PointC (@PointC) on CodePen

 

Hopefully that helps.

 

Happy tweening.

:)

  • Like 4

Share this post


Link to post
Share on other sites

Hello,

 

Can this be achieved with the Scroll Magic Wordpress plugin?

 

There is a 'Scene Sequence Image' scene that comes bundled with the plugin which achieves the image sequence effect but not the fade transition between images.

 

Can the code provided somehow be inserted into this scene?

 

Cheers,

Ellis

Share this post


Link to post
Share on other sites
2 hours ago, ellis said:

Can this be achieved with the Scroll Magic Wordpress plugin?

 

I'm not familiar with that plugin. Have you tried it in your project? Have you asked in the ScrollMagic forum? (SM is not a GreenSock product)

https://github.com/janpaepke/ScrollMagic/issues

 

If you have any GSAP related questions or problems, we're happy to help. 

  • Like 3

Share this post


Link to post
Share on other sites
3 hours ago, ellis said:

Can the code provided somehow be inserted into this scene?

 

 

Looking at the plugin's promo page it looks like they've made a GUI for setting everything up it but it doesn't appear to offer any information about adding your own code. I would suggest you ask the author of the plugin.

  • Like 2

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.