Jump to content
Search Community

Relative values using ScrollTrigger.create

d_lobsn test
Moderator Tag

Go to solution Solved by OSUblake,

Recommended Posts

I was actually wondering, what I need to do in order to create two ScrollTriggers on the same element and attaching a tween to it, which moves it by a x value.

 

It seems like the x value is always reset to 0 first, when the new ScrollTrigger is applied. I actually thought relative values are using the current value. What am I missing here. Even setting the transform value initially doesn't seem to work.

 

PS: I'm aware that the example I posted looks like in could reduce the animations, this is not the case in the real project. Should i actually use a function to calculate the absolute xPercentage?

 

Any help would be highly appreciated.

See the Pen PoKreKp by daniel-brolli (@daniel-brolli) on CodePen

Link to comment
Share on other sites

  • Solution

First, you would need another animation.

 

let anim = gsap.to(
  '.title', 
  { x: '+=50' }
);

let anim2 = gsap.to(
  '.title', 
  { x: '+=50' }
);

ScrollTrigger.create({
  trigger: ".triggers .first",
  scrub: true,
  start: 'top top',
  markers: true,
  animation: anim,
});

ScrollTrigger.create({
  trigger: ".triggers .second",
  scrub: true,
  start: 'top top',
  //end: 'top center',
  markers: true,
  animation: anim2,
  immediateRender: false
})

 

Notice the use of immediateRender on the second ScrollTrigger...

 

 

  • Thanks 1
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.
×
×
  • Create New...