Reveal on scroll using stagger and scrollmagic

[ddi-web-team]

Hi all

 

I'm trying to achieve the same effect discussed in this thread here but without using Intersection Observer as the browser support isn't there and the polyfills seem to be lacking.

 

So I'm trying to achieve the same exact effect using reveal on scroll by Scroll Magic. The problem I'm running into however, is I don't seem to be able to update a timeline like the previous thread seem to be able to do.

 

Here is the meat of my codepen demo

 

const controller = new ScrollMagic.Controller();
let cards = document.querySelectorAll('.card');
const card_timeline = gsap.timeline();



$(function() {
    animateCards();
});

function animateCards(){
  for(var i = 0; i < cards.length; i++){
    card_timeline.fromTo(cards[i], {opacity:0}, {opacity:1})
    let scene = new ScrollMagic.Scene({
      triggerElement: cards[i],
      reverse: false
    }).setTween(card_timeline).addTo(controller);
  }
}

 

But as you can probably tell, this just adds all the tweens to the timeline and then calls that timeline to run when the first card enters the view port.

 

Any help would be appreciated.

See the Pen 02d360df11854cc82bc7191f7263b4f4 by DDI-Web-Team (@DDI-Web-Team) on CodePen.

[ZachSaucier]

Hey ddi-web-team and welcome to the GreenSock forums! 

 

I'm curious why you say "the polyfills seem to be lacking". This is a very simple use case of intersection observers, so I'm surprised that they wouldn't work. 

 

We don't really recommend ScrollMagic. You can create the same effect without ScrollMagic or intersection observers by using the offset and scroll position:

See the Pen NWqEepW by GreenSock (@GreenSock) on CodePen.

[OSUblake]

1 hour ago, ddi-web-team said:

without using Intersection Observer as the browser support isn't there

 

Looks pretty good to me. It's supported in all modern browsers.

 

But what about IE? 

 

 

IE usage is skewed because of a South Korean law.

 

[Shrug ¯\_(ツ)_/¯]

Hi @ddi-web-team, welcome to the GreenSock forums! Thanks so much for being a Club GreenSock member helping to support us so we can provide all the great benefits of the GSAP tools for everyone!

 

I’m also curious however why do you feel IntersectionObserver is not acceptable even with polyfills? As mentioned above its widely supported. Also keep in mind that ScrollMagic is not a GSAP product so we don’t really offer support here nor recommend it. So these types of related ScrollMagic questions may or may not be fulfilled here on our forums and generally users will be directed to use a more modern and simplified approach. ?

 

Regarding IntersectionObserver here is a recent helpful article by one of our moderators, it might help you.

https://medium.com/elegant-seagulls/parallax-and-scroll-triggered-animations-with-the-intersection-observer-api-and-gsap3-53b58c80b2fa

 

[ddi-web-team]

53 minutes ago, OSUblake said:

 

Looks pretty good to me. It's supported in all modern browsers.

 

But what about IE? 

 

 

IE usage is skewed because of a South Korean law.

 

 

On my personal site, I don't worry about it at all. At work, a big chunk of our users still use it. Too many to just ignore.

?

[ddi-web-team]

37 minutes ago, Shrug ¯\_(ツ)_/¯ said:

Hi @ddi-web-team, welcome to the GreenSock forums! Thanks so much for being a Club GreenSock member helping to support us so we can provide all the great benefits of the GSAP tools for everyone!

 

I’m also curious however why do you feel IntersectionObserver is not acceptable even with polyfills? As mentioned above its widely supported. Also keep in mind that ScrollMagic is not a GSAP product so we don’t really offer support here nor recommend it. So these types of related ScrollMagic questions may or may not be fulfilled here on our forums and generally users will be directed to use a more modern and simplified approach. ?

 

Regarding IntersectionObserver here is a recent helpful article by one of our moderators, it might help you.

https://medium.com/elegant-seagulls/parallax-and-scroll-triggered-animations-with-the-intersection-observer-api-and-gsap3-53b58c80b2fa

 

Happy to support. GSAP is an amazing product.

 

Thanks for the link. I'll read more into the polyfill. When I tried using one before, I couldn't get it to work properly. I'll try it again. If I can get that to work, this problem becomes much more simple.

[ZachSaucier]

The way we recommend doing this sort of effect now is using ScrollTrigger's .batch() method. It's super simple and even more powerful!

See the Pen NWGPxGZ by GreenSock (@GreenSock) on CodePen.