Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Roli

Fade Image Sequence with Scroll Magic and GSAP

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

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

Thank you so much!!!

 

That help me!!

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

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);

Share this post


Link to post
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:

 

Share this post


Link to post
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

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. 


  • Recently Browsing   0 members

    No registered users viewing this page.

×