Jump to content
GreenSock

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

about scrolltrigger multiple elements in same section

Recommended Posts

I created 2 divs in orange section...I want to animate them first text1 marginTop -50px to 50% of orange container and text2 to 100%...

 

actually I will add 2 more texts in section orange...but I have to understand with these two divs animation...I started to use scrolltrigger today and I am new...

 

if you check my codepen you can understand my problem...(I cannot understand multiple child use...)

 

thanks...

 

See the Pen jOVzbKJ by ersenturgut (@ersenturgut) on CodePen

Link to comment
Share on other sites

Yep, @codeIMperfect is right - you could do it like this: 

See the Pen 4a3f1b403c8a7d760bdd6c11de8f82ff?editors=0010 by GreenSock (@GreenSock) on CodePen

 

I'm not sure exactly what you wanted the animation to be like (sequenced? Concurrent?) but you can tweak it to be whatever you want. 

 

Happy tweening!

  • Like 1
Link to comment
Share on other sites

4 minutes ago, GreenSock said:

Yep, @codeIMperfect is right - you could do it like this: 

 

 

 

I'm not sure exactly what you wanted the animation to be like (sequenced? Concurrent?) but you can tweak it to be whatever you want. 

 

Happy tweening!

 

ok but this is not what I want...I want to make first text1 to -50 until 50% and then text2 to -50 until 100%...on your code both of them ending with 50% of container scroll...I want to make multiple items in a section and last one end 100%...for example tex1 20%, text2 40% ..... lastText 100%

 

I hope I can explain...

 

Link to comment
Share on other sites

3 minutes ago, Lovestoned said:

I want to make first text1 to -50 until 50% and then text2 to -50 until 100%...on your code both of them ending with 50% of container scroll...I want to make multiple items in a section and last one end 100%...for example tex1 20%, text2 40% ..... lastText 100%

Sorry, I don't understand - 100% of what? Do you have an example animation we can see? 

 

It might work best if you ignore ScrollTrigger at first - only focus on getting an animation to look the way you want. THEN once it looks good, you can link it to the scroll position. I'd recommend maybe trying to take the demo I gave you and play with it a bit to get the effect you want. Sorry, I just don't really understand the effect you're going for. 

Link to comment
Share on other sites

ok I made it...I removed end option from timeline and give it to both of them...working now...you can check on my pen...

 

thanks...

 

Link to comment
Share on other sites

it is working as I want but I see errors on console...

 

Invalid property end set to 50% Missing plugin? gsap.registerPlugin()

 

but working....

Link to comment
Share on other sites

Just now, Lovestoned said:

Invalid property end set to 50% Missing plugin? gsap.registerPlugin()

That means that you included a ScrollTrigger property in the tween's vars instead of the ScrollTrigger's vars. 

 

5 minutes ago, Lovestoned said:

you can check on my pen...

We'd really appreciate it if you use the "fork" button on CodePen if you're going to make edits to the demo that you've posted to the GreenSock forums. That way context is retained for future readers of the thread.

  • Like 2
Link to comment
Share on other sites

ok it is invalid use but if you check and run code again you can see animation what I want...working as I want...it helps you that understand what I want...and help me to make it valid..I clicked fork button...

Link to comment
Share on other sites

8 minutes ago, ZachSaucier said:
10 minutes ago, Lovestoned said:

Invalid property end set to 50% Missing plugin? gsap.registerPlugin()

That means that you included a ScrollTrigger property in the tween's vars instead of the ScrollTrigger's vars. 

 

And just to be clear, this  is what Zach meant: 

// BAD
gsap.to(..., {
  end: "50%"
});

// GOOD: 
gsap.to(..., {
  scrollTrigger: {
    end: "50%",
    ...
  }
});

Also, the "end" value is typically either something like "+=500" or a space-delimited one like "50% 80%" where the first number relates to the trigger, and the second relates to the scroller. 

  • Like 1
Link to comment
Share on other sites

7 minutes ago, Lovestoned said:

ok it is invalid use but if you check and run code again you can see animation what I want...working as I want...it helps you that understand what I want...and help me to make it valid..I clicked fork button...

Yep, Zach was correct - this is your [invalid] code: 

tl.to(".text1", {
   y:-50,
  end:"+=50%" // <-- BAD
});
tl.to(".text2", {
  marginTop: "-50px",
  end:"+=100%" // <-- BAD
});

Those "end" values aren't doing anything at all for you. They're getting ignored. You're literally telling GSAP that you want it to animate a property named "end" on your text1 and text2 elements (but of course there is no such property). I don't really understand what you were trying to do there, but if things are working the way you want then you can simply delete those lines. 

  • Like 1
Link to comment
Share on other sites

10 minutes ago, GreenSock said:

Yep, Zach was correct - this is your [invalid] code: 


tl.to(".text1", {
   y:-50,
  end:"+=50%" // <-- BAD
});
tl.to(".text2", {
  marginTop: "-50px",
  end:"+=100%" // <-- BAD
});

Those "end" values aren't doing anything at all for you. They're getting ignored. You're literally telling GSAP that you want it to animate a property named "end" on your text1 and text2 elements (but of course there is no such property). I don't really understand what you were trying to do there, but if things are working the way you want then you can simply delete those lines. 

 

OK please can you help me to make it correct...Let me explain what I want;

 

until the 50% of orange my text1 must animate to -50

until the 100% of orange my text2 must animate to -50px

 

is that possible? and how can I write that?

Link to comment
Share on other sites

Sorry, I have no idea what you mean :) What's "50% of orange"? What is your percentage referring to? 

 

Didn't you say you already got it working the way you want? 

Link to comment
Share on other sites

I mean,

 

when orange container reached to top of viewport if user continue the scroll text1 will start to animate to -50 and than text2 will start to animate to -50 and than orange will start to disappear from the viewport...I want to make multiple items animations in orange container and than scroll to next gray container...

 

 

Link to comment
Share on other sites

ok I removed end property and I wrote delay to text2 animation...it is working as I want right now...thanks for your reply...

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