Jump to content
GreenSock

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

Slow scrolltrigger animation

Go to solution Solved by tailbreezy,

Recommended Posts

  • Solution

A few things.

 

Moving your .para xPercent:100, moves it to the right by the value in offsetWidth which about 8000px.

Instead you can position it with left: "100%" to be right after the right edge — making it start immediately upon entering the trigger.

 

Additionally, if you want the animation to happen naturally you can to add that value (8000px) to the end marker of ScrollTrigger.

 

See the Pen 5536b576f1bf00911ee64c4f7e7c65b9 by dadacoded (@dadacoded) on CodePen

  • Like 2
Link to comment
Share on other sites

9 minutes ago, tailbreezy said:

A few things.

 

Moving your .para xPercent:100, moves it to the right by the value in offsetWidth which about 8000px.

Instead you can position it with left: "100%" to be right after the right edge — making it start immediately upon entering the trigger.

 

Additionally, if you want the animation to happen naturally you can to add that value (8000px) to the end marker of ScrollTrigger.

 

 

Oh thanks

 

Link to comment
Share on other sites

Hey midnightgamer. How a scrub animation's duration is calculated is explained in the docs which I recommend that you read.

 

The only things that I recommend changing about tailbreezy's demo:

  1. We recommend the condensed string form of eases - in this case ease: "power3.inOut". See the most common GSAP mistakes for more info.
  2. There's no need to do something like select(".para") as the target of your tween. Just pass in the selector string (".para") instead.
  3. If you're going to refer to the same element multiple times it probably makes sense to save it to a variable and use that variable as a reference.
  4. If all you have in your timeline is this one tween, it might make more sense to just use a GSAP tween with an attached ScrollTrigger instead of a timeline. It would have slightly less overhead.
  5. You should use a functional value for your ScrollTrigger end so that it works on resize: end: () => '+=' + select('.para').offsetWidth

Altogether:

gsap.registerPlugin(ScrollTrigger);

const select = (el) => document.querySelector(el);

const para = select(".para");
const firstSection = select(".section-one");

gsap.set(para, { left: "100%" });

gsap.to(para, {
  xPercent: -100,
  ease: "none",
  scrollTrigger: {
    trigger: firstSection,
    markers: true,
    scrub: 0.3,
    start: "top top",
    end: () => "+=" + para.offsetWidth,
    pin: firstSection
  }
});

 

  • Like 3
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.
×