Jump to content
Search Community

Fade Image Sequence with Scroll Magic and GSAP

Roli test
Moderator Tag

Go to solution Solved by PointC,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

  • Solution

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
Link to comment
Share on other sites

  • 2 years later...

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

Link to comment
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
Link to comment
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
Link to comment
Share on other sites

  • 10 months later...

I am trying to replicate a similar affect, but instead of crossfade between images straight away, does anyone have any ideas how to fade out the previous image completely before fading in the next image?

 

const fadeImagesTrigger = document.querySelector('[data-scroll="fadeImagesTrigger"]');
const fadeImages = document.querySelectorAll('[data-scroll="fadeInOut"]');
const fadeInOut = new TweenMax.set(fadeImages, {autoAlpha: 0});
let tween = TweenMax.staggerTo(fadeImages, 1, {autoAlpha: 1}, 1);

let scene = new ScrollMagic.Scene({
    triggerElement: fadeImagesTrigger,
    duration: '200%',
})
    .setTween(tween)
    .addIndicators()
    .addTo(controller);
Link to comment
Share on other sites

Hey @anandpatel and welcome to the GreenSock forums! 

 

Sequencing animations is exactly what GSAP's timelines are for:

const fadeImagesTrigger = document.querySelector('[data-scroll="fadeImagesTrigger"]');
const fadeImages = document.querySelectorAll('[data-scroll="fadeInOut"]');
const timeline = gsap.timeline();

timeline
  .to(fadeImages[0], {duration: 1, autoAlpha: 0})
  .to(fadeImages[1], {duration: 1, autoAlpha: 1})

let scene = new ScrollMagic.Scene({
    triggerElement: fadeImagesTrigger,
    duration: '200%',
})
    .setTween(timeline)
    .addIndicators()
    .addTo(controller);

Check out our getting started article for more information:

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...