ddi-web-team

Hi @ZachSaucier That worked like a charm. Thank you. I wasn't aware that ScrollTrigger added a container to the DOM. Learned something new.

I love the example of the layered pinning example using scroll trigger that the Green Sock account made https://codepen.io/GreenSock/pen/BaowPwo and I wanted to use this concept to create a timeline for my company. I have the concept working but something that I realized is that scrolling fatigue might set in because it's a large timeline. The solution that I came up with was a 'controller' that would be pinned to the side that would contain anchors to the decades of the company's history. I use jquery to scroll to the container that is the trigger for the scrollTrigger. $('html, body').animate({ scrollTop: $('#container1').offset().top }) This works if you're viewport is above a decade and you click on the controller. But if you're already past a certain decade and use the controller, it does take you to the correct container, but the animation is already played out. I thought the solution would be to reset the specific timeline that controlled the decade you were scrolling to, but that didn't work. _70s.on('click', function(event){ event.preventDefault(); //This is what I tried. Trying .invalidate() breaks the animation completely tl1.restart(); $('html, body').animate({ scrollTop: $('#container1').offset().top }) }) But this doesn't work. The animation is still at the end. I thought maybe invalidate() was what I needed but that completely broke the animation. Any help would be greatly appreciated. And thanks for the scroll trigger plugin. It's been a lot of fun to use.

I'd be interested in stagger for scroll trigger. Good suggestion Yannis.

No hassle at all. I'm glad that I could help ?

I'm having trouble getting the new Scroll Trigger plugin working in IE11. I can recreate the issue in a codepen. I provided the default URL, but to see the issue properly, you'll need to look at debug view as that's the only view that works properly with IE11. https://cdpn.io/DDI-Web-Team/debug/ef47361ba478799899683f07f3aaf0ae If you look at the console in IE11 it says Invalid property scrollTrigger set to .logo Missing plugin? gsap.registerPlugin() But this isn't an issue in newer browsers. It seems like it does actually do the animation. But it does it on load. Edit - GSAP provided a fix below. I've updated the codepen to reflect the workaround. Leaving up the codepen for anyone that might stumble across it with a search engine query.

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.

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

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.