wpsoul

Try to reload page, sometimes it's correct, if window was resized, but mostly it will be too far bottom https://monosnap.com/file/WMlmqn3d4dGkJKszgUJwCzRuIGbWbl Problem is not in width and height attributes, problem is when height attribute doesn't the same as real height in viewport. For example, it's resized by css or height of container. And this scenario is almost on all complex sites, because images must be responsive. I can't use Scrolltrigger for lazyloading, because I am building gsap app for existed wordpress theme. Lazysizes script is recommended by google and it has one important thing which is not available in Scrolltrigger, it's working correctly on ajaxed elements and dynamic elements and has many addons, like iframe lazyload, background lazy load, support for responsive sizes, etc. P.s. I can't understand why position is correct if I resize window. Is Scrolltrigger refresed on window resize? P.s 2 - Added ScrollTrigger.refresh() - no difference. Is any way to make it's working for detecting height after css resizing instead of using height parameters of image? P.s. 3 - it looks like it's working correctly on first load. But if you reload page, you will see problem. Not sure why it's happening.

I made demo for you. https://codepen.io/igor-sunz/pen/NWxaONx I tried to attach event and try to add ScrollTrigger.update on window load - it doesn't work. Always, show me wrong position of element

yes, this is correct. Problem is that image has height attribute, but it's not always the same as real height in viewport, because all images are responsive. So, I think I need opposite - I need to prevent calculation of images from height attribute. I also don't understand why ScrollMagic and waypoints have no such problem. Or as alternative, how to recalculate ALL scrolltriggers at once? Is ScrollTrigger.update() working for all instances?

I try to drop ScrollMagic, everything works correct and easy to convert, but one problem is too critical. I have some lazy load images. And ScrollTrigger detects position of Element with wrong place if there are lazy load images on page. But if I resize window, position becomes correct. https://monosnap.com/file/FboOazk2EhmlsR5frWGNtUjgInRlhF I think it's because scrolltrigger calculates height based on height attribute of images, but they can be resized in window after lazy load is working. Is any way to recalculate positions of elements or calculate them after all other scripts make job? I don't have the same problem in ScrollMagic

That's correct. Clients like something not usual. But, I like when horizontal scroll is just one small section of site. It's cool for homepages when you need to show some gallery as section, something like carousel of important images

I am also waiting new plugin. Currently, I am using Scroll magic because it has one cool feature like Pin option and horizontal scroll. I hope new plugin will also have it.

Ok, i's clear now. Reason why I use pause is because I use animations in waypoints. So, it must be triggered once object will be visible in window. Is there any better way than pausing timeline? I have next now revealwrap.Waypoint(function(direction) { tl.play(); }, { offset: 'bottom-in-view' });

I read this article. But I have another case. Let me expain in another way. What will be more faster: 1000 timelines or 1000 tweens (if they do the same things)?

Is there any perfomance or speed difference between two ways? gsap.from(obj, {duration:1, scale:2}); and var tl = gsap.timeline({paused: true}); tl.to(obj,{ duration:1, scale: 2}); tl.play();

ok, I tested again, it was syntax mistake, I forgot that we have another syntax in GSAP3 and duration must be set inside arguments I can confirm that it's working with GSAP3, tested opacity, position, scale and rotation.

Looks like it doesn't work for GSAP3 (tested code above)

Ok. I think I found issue in my setup. By default, three js examples are placed on page as Module scripts <script type="module"> This was reason why I could not get access to variables in separate scripts. Currently we can close this

I will try to explain on example 3d scene Check js file, in end of file we animate planets, like mercury.position.x = Math.sin( time * 4.5 ) * 5; so, we can easily get mercury object and animate it via GSAP But what if I have another script file, if I try to use the same code, mercury variable will be undefined. So, my question is how we can get access to this object and animate it via GSAP in fact that code will be in separate file?

Currently, I can't find answer on one simple question. Imagine that I have simple scene with Three js I have special application with GSAP, but I load it in separate script file. So, how can I get scene object and model objects from activated Three js canvas? All examples which I found require to place GSAP code directly in animate function of three js init, but I need to modify it separately from another file