[When using scrollWidth as value for scrollTrigger, it doesn't count for element's padding]

6 minutes ago, akapowl said:

 

Hey @kohlej

 

I'm pretty sure, ScrollTrigger is interpreting things correctly there.

Your problem is more CSS-layout related.

 

You can see that when you comment out all your JS and remove the overflow-x: hidden from your roller, that things are not set up the way you might think in the first place. So you might want to tweek your setup so it displays as wanted first before hooking it up to ScrollTrigger.

 

 

 

 

I thought that might be the case, but then it weirded me out that it actually almost does the right thing. I know that .roller__inner isnt taking the width of child elements, but of my viewport width, but why does it even scroll then?

I will look into it and update here

[When using scrollWidth as value for scrollTrigger, it doesn't count for element's padding]

Hi guys, here is simple demo of me using scrollWidth of element - clientWidth to show whole .roller__inner on scroll.

However it's not showing the right padding of .roller__inner as it should. (As far as I know scrollWidth takes padding into the value)

Anyone can help with this?

See the Pen mdRYmpO?editors=0010 by kohlej (@kohlej) on CodePen

[How do I make x: value change on resize?]

20 hours ago, ZachSaucier said:

Hey kohlej and thanks for the clear demo and your attempt at a solution! That's very helpful.

 

I recommend making use of the fact that ScrollTrigger can recalculate properties of your tween on resize so long as you tell it to using invalidateOnRefresh: true and a functional value for the property you want to change, like so:

 

 

Thanks Zach, this is exactly what I needed. 

You're very welcome for the demo, the effort you guys put to help users on this platform is incredible, I'm pretty sure that greensock's forum is most "efficient" in giving solutions and most active forum on the internet, and that is thanks to you and few more people here!

[How do I make x: value change on resize?]

Hello guys, 

I have two div: .box which is parent and .roller which is child.
.box has width of 50% while .roller has fixed width which is suppose to be bigger than .box.

As I scroll, I want the .roller to move to the left inside the .box and at the end point of trigger, .roller's right side should side with .box right side.
I got this working perfectly fine with my codepen example Demo 1, but I want it to work on resize. I tried using resize function but I dont know how to pass value...
I also tried to look into function-based values but couldnt find anything that would help me...

Any help is appreciated;

Demo 1 (Working example without resize)

See the Pen GRNKjWe by kohlej (@kohlej) on CodePen

Demo 2 (Not working example, trying to use resize function)

See the Pen PobYGeY?editors=0010 by kohlej (@kohlej) on CodePen

[How do I set scroller: ".myclass" for every scrollTrigger I used so far?]

53 minutes ago, GreenSock said:

If I understand your question correctly, just set a default up front: 

https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.defaults()

Yup exactly this. I went thru docs but obviously missed this part, thanks.

[How do I set scroller: ".myclass" for every scrollTrigger I used so far?]

Hey all,
I have a website where I used lots of scrollTriggers. 
Now that I decided to use loco smooth scroll, I relized I need to give scroller to each, which I dont think is the way to go, is there a option how I can set scroller for every scrollTrigger I made?

[Ihatetomatoes "Practical GreenSock" Tutorials - Giveaway]

Uh everything. I guess the community on this forum, it's very helpful. But more directly to GSAP itself, probably ScrollTrigger

[ScrollTrigger.scrollerProxy problem. Some elements are getting animated on scroll but some are not]

2 minutes ago, ZachSaucier said:

Well your function is being ran if you add it so try debugging it  

Not really good at it, but I will try. Hopefuly someone else also had experience with this who might help. 
Thanks for usefull info tho!

[ScrollTrigger.scrollerProxy problem. Some elements are getting animated on scroll but some are not]

46 minutes ago, ZachSaucier said:

Though I don't really understand your logic inside of the onUpdate callback - I can't seem to get it working with or without Locomotive Scroll.

Here is working example without Locomotive Scroll : 

See the Pen mdPyyjK by artyor (@artyor) on CodePen

Here it works as intended, where .skew-box is animated on scroll

Maybe the point of using onUpdate is more clear in this example?

 end: () => innerHeight, doesn't seem to do anything for me

 

[ScrollTrigger.scrollerProxy problem. Some elements are getting animated on scroll but some are not]

I forked LocoScroll demo that from Greensock codepen account.

My animation with most usual gsap.to tween works just fine on .rotate-box, however .skew-box which has new instance of ScrollTrigger doesn't work, even tho I gave custom scroller to both. Both animations work if I'm not using locoScroll. 

Could someone tell me why is this happening and if there is way around it?

 

See the Pen gOrbbxz by artyor (@artyor) on CodePen

[Forked ScrollTrigger demo from codepen. Can't use quickSetter because of pseudo element.]

Sorry, I found a way how to animate vars, I will update my the post if I cant make it work.

EDIT:
I got it to work,  thanks Zach.

Could you please confirm that I'm not doing anything too stupid related to replaced code?

See the Pen poyoWNN?editors=0110 by artyor (@artyor) on CodePen

[Forked ScrollTrigger demo from codepen. Can't use quickSetter because of pseudo element.]

7 hours ago, ZachSaucier said:

 

I don't understand how the design choice makes it be a psuedo-element. Visually a child element is the exact same as a pseudo-element. 

Basically I wanted to animate text, and instead of having same text appear 3x in DOM, and then placing it behind with position absolute, I found it much more neat to use :after and :before to collect data with content: attr(). I just used boxes for codepen as it's faster to make and easier to understand.



I would never think of animating CSS variable. How would I target it tho in quickSetter? What I tried is:

EDIT:
Update in comment below, I got it to work.

[Forked ScrollTrigger demo from codepen. Can't use quickSetter because of pseudo element.]

Hello all,

I used a codepen demo I found here. It skews element on scroll and resets position once you stop.

If you check the codepen demo, it works, but only because the target is ".circle", I want target to be ".circle:after".

For this I need to use cssRule to select pseudo element, but since the demo is using quickSetter, I'm not sure how to adapt it.

Is it possible, if so, could anyone tell me how?

PS, I can get wanted result without using pesudo, by using another div with absolute position, but duo to design choices, I have to use pesudo in RL example.

Thanks in advance.

See the Pen poyoWNN by artyor (@artyor) on CodePen

[How to play and pause tween when class is added to element? It looks like I'm very bad at googling]

On 7/22/2020 at 12:05 AM, ZachSaucier said:

Hey kohlej.

 

Some JS code has to run in order to add the class to the element, likely a function of some sort. You should just fire the tween when that JS runs (if it runs in a function then you call tween.play() or .reverse() inside of that function).

 

Technically you could also do this using mutation observers but that's almost always less preferable to just adding JS where the class is added.

Hi Zach.

Yes I thought of that, but the class gets added and removed randomly, so I couldnt use event listeners like click, mouseover etc...So was wondering if there was any listener that can be added to element to watch for class change. 

I guess mutation observer will work, but I will have to rethink this whole thing. 

Thanks!

[How to play and pause tween when class is added to element? It looks like I'm very bad at googling]

I'm aware that this is not Greensock question but I really tried to look for answer everywhere.

1) I made a tween which is paused.
2) I want to play the tween or play it in reverse when class is added to HTML element. 

I use vanilla JS, so I'm not looking for jQuery solution. 

Thank you

[Trying to create a multiScroll effect]

Jones Greensock released their own scroll plugin, ScrollTrigger, check it out. This looks doable with scroltrigger 

[ScrollTrigger with option ‘once’ set doesn’t work if scrolling up Initially]

Hi Mike, you want the tween to be played when element enters the viewport both way?

You can use toggleActions, everything is explain in their scrollTrigger video.
https://greensock.com/docs/v3/Plugins/ScrollTrigger

[Smooth Scrolling (Not Anchor-Jumping!)]

1 minute ago, ZachSaucier said:

Yep. It's because the tween that makes it look like smooth scrolling is actually moving the container around.

 

We didn't build ScrollTrigger to do scroll-jacking (which is what smooth scrolling requires), but it's entirely possible to leverage it to create similar effects. We're not prepared to offer any official recommendations in that regard yet. If there's enough demand, we may add something in the future.

Thanks for info and fast replay, I thought it was me doing something wrong. 
 

[Smooth Scrolling (Not Anchor-Jumping!)]

6 hours ago, ZachSaucier said:

Hey Mario and welcome to the GreenSock forums.

 

That site is indeed made with GSAP. It was made with an old version of GSAP but many of the effects on it could be made much more easily using the new ScrollTrigger GSAP plugin  I think you're going to love the plugin!

 

Smooth scrolling (also called momentum scrolling) is possible using the ScrollTrigger plugin as Blake shows in this pen. 

Hi Zach,

I forked Blake's pen, to animate each box, but start and end point markers move with the page, and don't stick to element, do you know why is that?

See the Pen bGEGVZg?editors=0010 by artyor (@artyor) on CodePen

[ScrollTrigger markers are off when any element above it changes height]

49 minutes ago, ZachSaucier said:

Hey kohlej. In general it's not good to animate non-performant properties like height and padding. 

 

With that being said, if you change the position of an element with a ScrollTrigger you'll need to make ScrollTrigger refresh.

onComplete: () => ScrollTrigger.refresh()

 

Hi, I will try to acomplish it with this. 

Yes Im aware that manipulating height/padding is not the ideal, but it was some unique animation I wanted to create.

Thank you

[ScrollTrigger markers are off when any element above it changes height]

Hi guys, here is a demo where I reproduced the problem.

Markers of H1 element are off the same amount as the other section element above it changed it's height(padding top and bottom) before it.
 

By markers I also mean the start and end point of actual animation. 

Any way to avoid this?

PS.
Thank you for creating this awesome plugin! It's awesome

See the Pen OJMLKNp by artyor (@artyor) on CodePen

[[SOLVED thanks to PointC] Hello, I made button animation with codepen example attached. Duration question]

2 hours ago, PointC said:

If you want them both to have a duration of 0.35, I'd think that would be the perfect time to use the stagger object with 'amount'. Here's a fork of your demo in which I've added that update. I also set both eases to "none" so you can see the line animates as the letters move. Keep in mind that different eases on tweens of the same duration may make it look like they are not necessarily in sync.

 

 

 

 

More info on all the fun stuff you can do with stagger:

https://greensock.com/docs/v3/Staggers

 

Hopefully that helps. Happy tweening.

 

 

Thanks! Works just as I wanted

I'll check the docs you linked.

[[SOLVED thanks to PointC] Hello, I made button animation with codepen example attached. Duration question]

I have two tweens in timeline, and both duration is set to same amount ".35".

I want to bottom line animation last as long as duration of text animation, and to start at the same time, so I added "-=.35".

This would work as intended in my mind if there wasn't stagger in 1st tween, which adds up on its duration.

Now I can do calulation and add custom duration to line tween, but I will have more buttons with different char number, so the 1st tween will never be the same.
Is there a way to make 2nd tween as long as 1st tween, regardless of how many elements will be affected by stagger?

See the Pen zYvXRyb by artyor (@artyor) on CodePen

[Do you need GSAP to animate .from() when the div enters the screen?]

On 5/4/2020 at 2:45 PM, ZachSaucier said:

You can just call it "the (GSAP) scroll plugin" for now. What questions do you have?

Well I assume there is still no exact date of release, maybe what is it capable of doing?
Can it animate elements on scroll, depending on scroll position, like we can do with ScrollMagic? 

[I made very simple codepen to demostrate Intersection Observer question I have...]

On 5/4/2020 at 2:55 PM, ZachSaucier said:

Hey kohlej.

 

This isn't too bad for performance, though it's not optimal. And in terms of keeping things DRY, if it's in a loop or something it'd be okay.

 

It's not clear exactly what sort of different values you're wanting. If you can use a formula based on the index then that's one way to do it. If you can't use a formula, I might use data attributes on each element to determine how it should be animated. Then inside of the intersection observer callback you get the animation values from those data attributes.

Hey,

Thank you for reply Zach.

I think index might not work as the layout is rather complex, but I will try with data attributes.