wpsoul

I still think that it's bug in latest update Here the same codepen in 3.10 version https://codepen.io/igor-sunz/pen/PoePxPq It's working, stagger completes animation as it should. Why? Do you mean that all previous years it was wrong and now it's correct? How about situations when I need hover transform effect on animated blocks?

I understand that css property can affect animation. It's not my problem. My problem is that stagger animation didn't finish even in fact that css has no any applied css transform properties, it has only transition easing. I updated my codepen, I included also another gsap.from but without stagger. As you see, problem is only on stagger block, blocks without stagger property has no problems in finishing animation.

I don't apply css transitions for the same properties. I apply transition: all 0.4s (for example). And it's for applying hover transitions on the same block and this was working early. Does it mean that GSAP checks also hover state now? In css, only Box-shadow effect is applied on Hover. Does it mean that we can't add any css effects on the same block now? And why it's not working only on staggers?

After some testing, I found that problem is in cases when element has css transition property. Why do this affect stagger? Previously it was not a problem.

I think that there is bug in all stagger effects in latest update. I checked on previous version and it's fine As you see, only first element is animated (sometimes all animated but not finished and it has step effect). P.s better to edit on codepen to see what I mean

Apple uses exactly technic of image sequence. I just recently did the same https://greenshiftwp.com/how-to-make-apple-style-pin-scroll-video-animation/ On DJI, they use two methods at once. When you start scroll, they show image sequence, when you reach some point, they show autoplayed video with event attached to scroll. You can do the same with Scroll trigger if you attach video animation to ScrollTrigger callbacks (for example onToggle callback) https://www.w3schools.com/tags/av_met_play.asp P.s. more frames per second you export as image sequence, more smooth and realistic will be animation, you just need to find proper interpolation between scroll and frame change.

Thank you, this was helpful. For first try I resolved by wrapping all code with new gsap.context() function and attaching to global variable making it available for other scripts. But solution with getting Scrolltrigger is better because I don't need global variables. I confirm that it's working

I am using timeline to add some pause in Horizontal scroll, but I need to find Tween instance of container automatically with getTweensOf function. Unfortunately it works only if I use tweens without timeline. As I inderstand, I need to get timeline instance first, then, search with getTweensOf inside timeline https://greensock.com/docs/v3/GSAP/Timeline/getTweensOf() But how can I get timelines objects on page which is attached to container? I tried to add id to timeline but this doesn't work

I am sure that this is not possible in browser. Export video as image sequence instead https://codepen.io/GreenSock/pen/mdVEpKK

I have a pleasure to test new Observer. It solves many needs and I want to build simple gallery with it. And relative gsap parameters are very helpful for such task. So, each swipe right, I add some relative value x:+=5. But now, I need to set limit of what is scrolled. So, I need to get current value before animation and check if it's not bigger then some value. Is using https://greensock.com/docs/v3/GSAP/gsap.getProperty() is correct way to do such tasks or there is some Observer utility?

Yes, this is what I used before. Problem with this function is that it kills all ST on page and I need to kill only ST of specific containers. Advantage of killTweensOf is that it has option to specify container, this is why I asked if it's killing also ST.

I want to remove all gsap.to, gsap.from and attached Scrolltriggers. Is killTweensOf enough to remove all of them?

Hi. I am one of developer of Rehub. If you don't use the same classes as in Rehub GSAP related blocks, then, your animation should work independently. P.s. Rehub has also Lottie block with enabled GSAP scroll possibilities (in Elementor) and new Interaction library for Lottie in Greenshift editor, so, you don't need any extra code for such task

So, proper way to get correct look is gsap.set to object itself or css property to parent? I checked gsap set on site and it looks correct, does it affect performance? Do we need to assign will-change?

Ok. this solved. But, I guess, that it's wrong options in documentations, because one of possible ways to add 3d as mentioned in documentation is next https://greensock.com/docs/v3/GSAP/CorePlugins/CSSPlugin#h2-3d-transforms gsap.defaults({transformPerspective: 500}); and this makes wrong animation. We must set to object and not to tween https://codepen.io/igor-sunz/pen/rNpoORy

I want to make real 3d look. If I add perspective value to parent container, it looks not proper because perspective added to whole block with all childrens. But when I add transformPerspective option according to documentation, I see strange jump in end of animation

This helped, scroll is much smoother and I don't see huge perfomance drop over area with product grid. I have one more question, because I see similar perfomance problem with scrub parameter and ScrollTrigger. Imagine I have 10 elements on page and all of them have different animations for GSAP. Is any difference in perfomance if I make 10 timelines and attach timeline to ScrollTrigger.create OR I make 10 gsap.from({scrollTrigger:{...}},...) ?

I don't think that parallax or css is the reason because parallax is made on GSAP and part of page where I see some jumping has no animations. I removed all scripts except GSAP and removed all css transitions. And I still see some jittering over part where I have product grid. The only difference from other parts is that it has a lot of DOM elements (prices, buttons, images, etc). Interesting thing that I tried the same page on my computer which has much better GPU and I don't see issues. So, it's something GPU related or OS related. I have problem on Macbook PRO, but it has good enough card with 8GB and powerful CPU. P.s I tried your feature with section option - it didn't help. Please, note, you need to test on full screen. Click on "Edit on Codepen" for this.

I tested smoothscroll and it's great addition to GSAP. And it works greate on pages with big elements. But I found huge perfomance drop on pages with many small elements a a lot of DOM elements. I copied whole page of site so you can see. When you scroll over section with product grid, perfomance is dropped down and I see huge jumping while scroll. When scroll is over next elements - it's restored (but still not perfect). Is any dependencies in ScrollSmoother on elements for page? Ps you can see better what I mean if you open Codepen in full page (looks like compact look has no such issue).

I definetely know that problem in Scrolltrigger, because animation is working good without it. So, Scrolltrigger is very sensitive to DOM levels and number of items on page. Will-change parameter helps a bit if there are just several animations (near 5, but not more than 10). I have also some thoughts that this can be related on conflicts with Scroll trigger and libraries which are used in Wordpress. Maybe jquery which is not latest in WP? I will try to make tests on site without extra plugins and with simple theme + deactivate jquery.

It's helped on codepen but not in wordpress editor which has too complex panels with several scrollable fixed zones and injected items. This hack makes scrolltrigger detecting correct position, but animation and scroll is going crazy. So, I give up in this, maybe I will try in future again

Problem is not in animation, because it works good if it's used on load or on other triggers (not Scrolltrigger). Also, will-change parameter can be used only on few elements on page, otherwise, it will make more problem that solve them.

As I mentioned in my initial message, this plugin is for Wordpress Editor (which is used on 60% of sites in internet) and we can't control structure of editor layers and styles of skeleton. Currently I just need to know if there is any possible way to make it works or 100% no chance.

Wanted to make the same topic. This is problem which I fight for months with GSAP. Interesting that when I tried to make minimal demo, everything is working perfect. After many tests, I found that perfomance and jumping is going only on real sites where I have a lot of DOM elements. I found this on some testing environment, where I have enabled debug plugin which has a lot of containers with hidden information. And also on pages where I have huge mega menus. So, even if DOM elements are hidden (or sticky) I see huge perfomance drop and this weird jumping effect, especially on large blocks (like you have on your site) and especially if I have several animations close together (for example, big container with parallax and small blocks inside this container with simple reveal effect). here is my example https://refashion.wpsoul.net/ Animations on first screen are made on load (without Scrolltrigger) and it's more smooth than animations on second screen when I have parallax with Scrolltrigger P.s want to add that Firefox, Opera work much better, the biggest issues are in Chrome

Unfortunately, I need get back to this question. Scrolltrigger.refresh is detecting proper position of items which are on screen, but when I start to scroll, everything is messed up again. I tried to replicate the same structure of containers like in Wordpress but for demo of plugin. And yes, it's also not working properly. Only first element which is on screen while loading has proper behaviour. I took official demo as base of Scrolltrigger and wrapped it with containers like in Wordpress editor https://codepen.io/igor-sunz/pen/qBPRQpm