Jump to content


How to Intro-Animate Elements which has SmoothScroller Effect (data-speed)

Go to solution Solved by SiDsBiZ,

Recommended Posts

  • Solution

Hello Greensock Team!


If i want to "Intro"-animate an Element (an img tag) the data-speed smooth scrolling is not working anymore. I tried also to animate an Container element with the same result. Is it possible to achieve that? What I also tried is to pause the ScrollSmoother till the intro is finished and then resume but the paused didint work:


            gsap.registerPlugin(ScrollTrigger, ScrollSmoother);

            let smoother = ScrollSmoother.create({
              smooth: 1.5,   // seconds it takes to "catch up" to native scroll position
              effects: true, // look for data-speed and data-lag attributes on elements and animate accordingly
                smoothTouch: 0.3,
                // paused: true
            let intro = gsap.timeline ({
                onComplete: function() {
                    // smoother.paused = false;


                 duration: 1.5,
             ease: "expo.out",
             top: -300,
             autoAlpha: 0,

            intro.from('.section-intro img',{
                 duration: 2.5,
             ease: "expo.out",
             stagger: 0.3,
             y: 1200,
             autoAlpha: 0


Link to comment
Share on other sites

The Solution is to intro-animate the inner Element (in this case img) and smoothscroll the outer Element (image-wrap), i did the mistake to make it the other way around. The data-speed Attribute has to be on the Outer Element.

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.