Jump to content
Search Community

Reveal on scroll using stagger and scrollmagic

ddi-web-team test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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

 

  • Like 5
Link to comment
Share on other sites

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.

😆

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 3 months later...

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...