[[React/GSAP] Why I can't use class selector in ScrollTrigger inside gsap.context?]

21 hours ago, GreenSock said:

Ah, that's because the selector text is Context-specific which is active only while that function is being executed. You're creating a new tween inside an onEnter which executes later (not while that context is active). So you just need to context.add() it so that it's associated with that context: 

https://stackblitz.com/edit/react-nup1tc?file=src%2FButton.jsx

 

In the next release, I plan to make that happen automatically in ScrollTrigger callbacks like that. Sorry about any confusion. 

 

Another solution would be to just use gsap.utils.selector(). There are quite a few options, but I don't want to overwhelm you

 

Happy tweening!

Thank you for explanation and solution!

[[React/GSAP] Why I can't use class selector in ScrollTrigger inside gsap.context?]

3 hours ago, Rodrigo said:

Hi

 

I'm on my phone now and I can't tinker with the code . What I can see from a quick glance is that you're not cleaning up your animation in your button component.

 

You should revert your GSAP context instance in the return function of your effect hook:

 

useLayoutEffect(() => {

  const ctx= gsap.context();

  return () => ctx.revert();

}, []);

 

Take a look at our React resources here

 

https://gsap.com/react

 

Hopefully this helps

Happy Tweening!

Hi Rodrigo, thanks but unfortunately that didnt fix my problem, I dont think it's related .

Here is new link with ctx.revert() and I also replaced ref with class selector to show that it's not working:
https://stackblitz.com/edit/react-rywjch?file=src%2FButton.jsx,src%2Fstyle.css,src%2FApp.js,src%2Findex.js

[[React/GSAP] Why I can't use class selector in ScrollTrigger inside gsap.context?]

https://stackblitz.com/edit/react-gskvp7?file=src%2FButton.jsx,src%2Fstyle.css,src%2FApp.js,src%2Findex.js

Hello all,

Here is React/GSAP/ScrollTrigger example made with GSAP starter template.

In Button.jsx file, inside the gsap.context, I have scrollTrigger, where I animate .my-button__bg, but if I use class selector to target it inside my timeline, it will trigger animation for all 5 buttons, but if I use btnBg useRef(), it will work.

so if u replace btnBg.current with '.my-button__bg' code will not work as intended, instead it will run animations for all 5 buttons.

Why is that?

[GSAP Flip, re-triggering animation on same image cancels the display none, but doing it on other image doesn't?]

9 hours ago, Rodrigo said:

Ahh, super simple. GSAP automatically sees that you are creating an animation on the same target that will animate the same properties, so it overwrites the previous animation, which gets killed. That's why that onComplete is not called.

Thank you! I was confused why it's acting differently, thanks for clearing that up.

[GSAP Flip, re-triggering animation on same image cancels the display none, but doing it on other image doesn't?]

3 minutes ago, Rodrigo said:

It makes perfect sense that if you click on another image, while you have an image that is going back the grid the full size container should disappear. The display is set to none after the Flip animation that takes the image back to the grid is completed.

Hi Rodrigo, thanks for commenting.

Yes that was intended, however, if you click on same image 1 while it's in animation of going back to initial parent (canceling the back animation), and animating it to full size again, onComplete of back animation won't trigger (Which is good, because if it did trigger, it wouldnt show image in full size).

However if you click image 1 to go full size, then click on it again to go back to initial parent, and while animation of going back to initial parent is happening, you really fast click on image 2, and then full size will actually go to display none and hide image 2 in full size (Because onComplete animation triggered). Now, I know how to solve it, but my question is:

Why does image 1 animation break/interrupt onComplete, but if we click on image 2, or any other image, it wont interrupt onComplete?

[GSAP Flip, re-triggering animation on same image cancels the display none, but doing it on other image doesn't?]

Hello all,

It's sorry for title confusion, not sure how to explain.

If you click on image in the grid, it will be animated to the right, and animation includes display block of grey wrapper on the right, when you click on it again, the image will go back to orginal place and also put display none to grey wrapper on the right (i added display none with onComplete prop).

 

If you click on image 1, then click again to cancel ani and bring it back, and before it finishes you click it again to go on the right side (so basically clicking 3 times same image) animation will work.

But if you click on image 1 once, and then you click again to bring it back, and while back animation is still goin on, you click on image 2, to show it on the right, it will start animation but it will disappear because display none will be added to wrapper duo to image 1 back animation.

Why doesnt that also happen when clicking 3 times on same image?

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

[Flip.from with combination of gsap.set doesn't animate to new values, instead it adds up]

Hi @Rodrigo, your codepen is what I wanted. Thank you. However I would like to learn why gsap.set xPercent to 0 didn't work? Shouldnt thata also reset x position, so next time I animate xPercent, I assumed it would work same as in your example. Tried to find solution in gsap docs, but couldnt find anything regarding this

[Flip.from with combination of gsap.set doesn't animate to new values, instead it adds up]

Hello @Rodrigo, it's because I want items to have different xPercent when they get back to initial parent, and then back to xPercent: 0 when they go to the grid. I assume I could do this with toggleClass, but doing it this way will give me more flexibility later

[Triggering Flip.from with a ScrollTrigger scrub animation, weird glitch?]

@Rodrigo Thank you Rodrigo. This seems to work great

[Flip.from with combination of gsap.set doesn't animate to new values, instead it adds up]

Hello all,

So in this codepen example I use Flip.from to get items into grid slots, and then on another flip to get them back in old parent, but also to transform each item to value I set with gsap.set. This works too, but on 3rd click, when I want to animate items again into grid, the gsap.set doesnt set xPercent value back to 0.

I also tried overwrite: true but it didnt work. Is there something Im missing? 

Thanks

See the Pen mdGWmxP?editors=1010 by artyor (@artyor) on CodePen

[Triggering Flip.from with a ScrollTrigger scrub animation, weird glitch?]

2 hours ago, GreenSock said:

Once I see the problem reproduced in a minimal demo, I'll have more to say I'm sure. 

Hi Jack @GreenSock, I didn't provide demo because it's your codepen I screen record, but here is forked version of it:
What I notice just now that it only happens if your Editor view has code panels on the side. It doesnt happen if code panels are on top, which is weird.

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

 

2 hours ago, GreenSock said:

81. See what I mean? 

Yes, I got it now! Thank you

I tested code on Windows 10, Chrome and Firefox, as well as on MacOS Big Sur, on Chrome. The problem looks more visible when using mouse instead of touchpad

 

[Triggering Flip.from with a ScrollTrigger scrub animation, weird glitch?]

Hi Jack @GreenSock

Thanks, I did screen record on your codepen where stuttering is also visible for me, in your commented example, while much less visible in initial example. Also for some reason, cards dont get aligned right (check video or play your codepen with commented example) at end of animation, and  then jump to right place? 
Link to streamable video

You were right to assume that I might want to not have all my cards lined initially, but wanted to simplify the demo. 
Basically initial start of cards wont be lined up, but I want to trigger their Flip animation with common trigger, not to have trigger for each card.

I made new codepen, where I mixed your code with mine and made it work (but couldnt get your commented example to work)
Basically I changed getState value, and changed scrub to true...But I kept '.images' as end trigger. It seems to be working without stuttering now...:
I am not making 88 animations here, or am I?

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

 

18 hours ago, GreenSock said:

".images"...and for every one of those you're animating ALL the images with a Flip animation! That's extremely wasteful

But .images is single element, container of other elements? So basically I wanted to use independent trigger, so animation gets triggered regardless of how are cards lined up. Why would this create 88 animations?
 

18 hours ago, GreenSock said:

you'd want to set once: true

Yes you are right, but I left it like this on purpose for codepen, so someone who checks my problem can retrigger animation and see stuttering easier.

Hi Cassie @Cassie, thanks, performance might be a problem, but it's not because Im animating 9 elements, since this thing doesn't happen at all if I use different trigger instead of ScrollTrigger. If I use "click" event listener to trigger Flip animation, it doesnt happen. It must be something in ScrollTriger am doing wrong. 

[Triggering Flip.from with a ScrollTrigger scrub animation, weird glitch?]

1 hour ago, Cassie said:

I'm afraid I can't see it,

If top edge of grey divs that are animated are not in viewport when trigger happens, it's easy to miss it. 
If you make viewport more portrait like, (or just lower width container of codepen preview) it will be easy to see top edge of animated grey box jumping a bit. 

Also you can scroll up and down over trigger point since it tigers each time because of "onLeave". I added markers: true so trigger is visible

simple: true didnt help. Thanks

Edit:
change css a bit so top edge of animated element is in viewport during the trigger

[Triggering Flip.from with a ScrollTrigger scrub animation, weird glitch?]

Hi all,
Here is codepen with example of what Im trying to do. Basically I want to append elements into another grid, and trigger it with onScrubComplete (in codepen im using onLeave so you can re-trigger Flip.from to see the glitch(?))

Basically there is just this small stutter that's happening when Flip.from gets triggered, it is happening with or without absoulute: true prop. 

Im also using SmoothScroller, but it happens without it too. However its more appearent with SmoothScroller, as page scroll moves slower...

Is there anything I can do to smooth this out? 
PS
If you dont see it at first, trying scroll a bit faster over the trigger..Its there I promise, tested it on more browsers and devices


Thanks in advance!

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

[I need ShockinglyGreen Club GreenSock for it's extra plugins, and I'm wondering how exactly license work.]

I'm wondering if I can use ShockinglyGreen in project I build for client and then sell the project to him?

Can I use one ShockinglyGreen licencees for different projects and different clients? Or do I need business club for that?

[I want to allow visitors to pick one of animations, change it a little, and download it as mp4. I want it to happen server-side so the quality and resolution is on me, and not depended their devices]

4 hours ago, Cassie said:

It may be worth looking into how Chris does it with his tool, maybe there's something that can be extrapolated for server side?
 

https://github.com/workeffortwaste/gsap-video-export

Thanks Cassie, will look into it

[I want to allow visitors to pick one of animations, change it a little, and download it as mp4. I want it to happen server-side so the quality and resolution is on me, and not depended their devices]

12 hours ago, Rodrigo said:

Hi,

 

I worked in a similar project a few years ago and the project used headless chrome because it was easier to integrate and use WebGL (PIXIJS) and the results were very good. Unfortunately I worked only on frontend stuff so I have no idea how exactly the backend was working. What I do remember that until my last day everything was working on the cloud and the videos were rendered frame-by-frame on the servers (AWS). What was used to put them together I couldn't tell you but my first guess would be ffmpeg as you mention. What I do remember is that this was a demanding process and required quite a bit of horse-power to get it done.

 

Sorry I can't be of more assistance about this particular subject. Maybe other users can chime in with their experience on the subject.

 

Happy Tweening!

Thanks Rodrigo. It seems like only few people needed similar solution so it's very hard to find more info on it.

[I want to allow visitors to pick one of animations, change it a little, and download it as mp4. I want it to happen server-side so the quality and resolution is on me, and not depended their devices]

Well as title say.

I looked into headless Chrome, ffmpeg, Pupeteer, but Im now kinda lost and wondering if anyone else had similar need and found the right solution?

Thanks in advance :)

[containerAnimation delay on horizontal scroll, why is it happening?]

5 hours ago, GreenSock said:

It sounds like what you're describing is the inescapable consequence of browsers handing scrolling on a separate (non-synchronized) thread. So imagine scrolling down very quickly and let's say the spot where pinning should happen is at exactly 500px (scroll position) and as you scroll quickly it goes from 490 to 520 on the next screen repaint. Well since the scrolling is handled on a separate thread, it'll show all the content as if it has been scrolled to 520 (20 pixels past where it was supposed to pin) and a few milliseconds later it executes the main (JavaScript) thread at which point ScrollTrigger says "HEY! Pin that element as if it were pinned at precisely 500", so you see it jump up 20px. 

 

anticipatePin is the only defense I know of, but it definitely isn't perfect. All that does is look at the velocity and try to predict ahead of time when pinning is supposed to happen so that it kinda jumps the gun a bit. Again, this isn't a bug in ScrollTrigger and as far as I know it's absolutely impossible to solve perfectly due to the way browsers handle scrolling and repaints. 

 

The only other thing I can think of is you could try applying smooth scrolling (NOT the CSS, I mean a JavaScript smooth scrolling effect - see .scrollerProxy() docs for some demos) because that essentially offloads the scrolling to the main thread. 

 

Does that clear things up? 

Yes, thank you. I always learn something new here.

I will give a smooth scroll, I guess locomotive should work ok with it

[containerAnimation delay on horizontal scroll, why is it happening?]

Its very hard to see on video, but it happes first two times I scroll up and down:
https://vimeo.com/manage/videos/644140012

[containerAnimation delay on horizontal scroll, why is it happening?]

@GreenSock
Yes, that's what I wanted.

I never thought of scrub as delay, but rather the "smoothness" of scurb animation

Thanks for clearing that up!

A quick follow up, these red boxes are actually images in my local project, but once the main parent pins, the images (and also text behind) have this werid kick? Like they go down  for brief moment, maybe like 1 frame per second, almost impossible to see it. I tried to solve it with "    anticipatePin: 1," but does not work. It's literally same code as in codepen

I can upload video if that could give you any better idea. 

[containerAnimation delay on horizontal scroll, why is it happening?]

Hi all,

I created codepen where you can see a .h-scroll__inner section that pins and do horizontal scrolling. 
I also animate inner element (red boxes) with new containerAnimation. But as you can see, red boxes have this delay when I use scroll wheel. they are not instant. 

Why is this happening?

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

[Rotaing text overlaping?]

Hi guys,

I made a simple demo where Im trying to rotate 3 spans.
My idea is that timeline overlaps, so it looks like one span is pushing other out, I tried this by using "-=1" after the first timeline is finished, but obviously it's not archiving wanted result. 

Is this even right direction to go with?

I also dont want to make it fixed for 3 spans only, there might be more. Thanks in advance.

See the Pen VwbWPGe?editors=1111 by artyor (@artyor) on CodePen

[Locomotive Scroll Update]

On 11/26/2020 at 6:45 PM, Shehzad Asif said:

Hi Zach,

 

This is just an update for locomotive scroll working with gsap specifically for touch screen and pinning. If you find it valuable pls update it on scroller proxy page.

 

Before update:

 

After update:

 

 

 

To activate smooth on touch screen:

 

This code is required in the locomotive object

 

// for tablet smooth
  tablet: { smooth: true }

 

  // for mobile
  smartphone: { smooth: true }

 

Following line is no more required to work pinning on touch screen

  /* pinType: document.querySelector(".smooth-scroll").style.transform
    ? "transform"
    : "fixed"*/

 

After the update of 4.0.4 recently, now scroll is much smoother then before. Why not have a look at both demos above and feel the difference.

 

Regards,

Shehzad Asif 

 

So I added smartphone and tablet smooth true, but It doesn't work for me for some reason. (I also commented out the gsap pin which should be used when mobile/tablet smooth is disabled). 

It doesn't add smooth class to my HTML element either. Im not getting any errors, really werid

[relative value x: "+=100" not working as expected]

I found the solution, sorry for spaming to forum:

  repeat: 5,
  repeatRefresh: true

Did the job (Still would be cool if someone more experienced could confirm this)