maciei

Hello Everyone! I have a bit of a generic problem/misunderstanding - basically, i have some animations in GSAP and have a couple of questions to understand it more deeply: When is the best time to load the GSAP animation (when the document is loaded or when everything is loaded (DOM, images, etc))? The first question leads to this one - if I do a hard refresh in the browser my animations are flashing or for example, the element that should be x: -100% is visible (for literally like 0.00s but still and then animation kicks in so there is a little flash) because the js file is not probably loaded yet - how do you guys tackle this, especially vital animations like for hero section or the other places when we need everything to be loaded and animated ASAP? Please have a look at the code below all bundled by webpack: $(function () { // Hero section animation const heroBanners = document.querySelectorAll(".section__hero-banner"); heroBanners.forEach((section) => { let imgCover = section.querySelector(".img-cover"); let imgTl = gsap.timeline({ scrollTrigger: { trigger: section, // markers: {startColor: "green", endColor: "red", fontSize: "18px", fontWeight: "bold", indent: 20}, start: "top center", }, }); // Inital state for headings imgTl.set(".hero-text__right", {x: "120%"}); imgTl.set(".hero-text__left", {x: "-120%"}); imgTl.to(imgCover, { opacity: 1, ease: "power4.inOut", duration: 0.4, }); gsap.utils.toArray(section.getElementsByClassName("hero-text")).forEach((heroText, herIdx) => { var container = section.getElementsByClassName("text-wrapper"); let textTl = gsap.timeline({ scrollTrigger: { trigger: section, scrub: 1, // markers: {startColor: "green", endColor: "red", fontSize: "18px", fontWeight: "bold", indent: 20}, start: "top top-=50px", end: "bottom center", // toggleActions: "restart none none reset" }, }); if (herIdx % 2 == 0) { let distance = $(container).width() - $(heroText).width(); //left imgTl.to(heroText, { x: "0%", duration: 0.85, ease: "power4.inOut", }); textTl.to(heroText, { x: `${distance}px`, }); } else { let distance = $(container).width() - $(heroText).width(); //right imgTl.to( heroText, { x: "0%", duration: 0.85, ease: "power4.inOut", delay: -0.85, } ); textTl.to(heroText, { x: `-${distance}px`, }); } }); }); }); The animation is: hero image fade in then slide two lines of text from left and right. Would be amazing he somebody could point out some bad practises or mistakes or if this could be done in better way. thanks you so much guyz!

Oh wow okay, that makes a lot of sense! Thank you so much for providing this. Also, I watched this https://gsap.com/resources/position-parameter/ which helped a lot! One more question regarding controlling timing and controlling tweens: - Is it a good approach to make multiple animations/tweens within the loop like the one below? - What would be the best way to control tweens within the loop, what I mean is: for example I want the second element/iteration to last longer (duration 2s) but the last one to be back to normal (1s). I'm trying to catch good practice in composing an efficient set of animations that depend on each other. Also each .country element needs to be fired almost in the same time with the relevant .animate-test but i think i have done it nicely with ""<0.25" position parameter " - This is my current code: var points = gsap.utils.toArray(".point"); // var height = 200 * points.length; console.log(height, 'total height') var locations = gsap.timeline({ scrollTrigger: { trigger: ".locations", start: "top top", end: "+=5000px", scrub: true, id: "points", pin: true, markers: true, }, }); locations.to(".main-title", { opacity: 1, duration: 1 }); locations.to(".main-title", { opacity: 0, duration: 1 }); // https://codepen.io/ervinbosenbacher/pen/oNYOwaz points.forEach(function (elem, i) { console.log(elem.getElementsByClassName("country")) gsap.set(elem, {position: "absolute", top: 0}); locations.set(elem, {zIndex: 100}); // locations.from(elem.getElementsByClassName('split right'), {opacity:0}, i) locations.from(elem.getElementsByClassName("animate-text"), {opacity: 0, translateY: 100, duration: 1}); locations.to(elem.getElementsByClassName("country"), {opacity: 1, duration: 1}, "<0.25"); if (i != points.length - 1) { locations.to(elem.getElementsByClassName("animate-text"), {opacity: 0, translateY: -100, }); // locations.to(elem.getElementsByClassName('split right'), { opacity: 1}, i + .25) } });

Hello everyone! I'm having trouble understanding and fully controlling my animations with Scrolltrigger and scrub. What I'm trying to achieve is - i want to have two animation elements (.main-title, var points) fired by scrollTrigger with the same trigger point. However I want to animate .main-title once it's finished i want to fire the next animations which are in forEach() .animate-text with paired .country. I think i achieved that in the codepen (please feel free to correct me or show the better/more efficient way). Now i have two problems/questions: I want to have full control of the duration/amount of scroll of each animation (.main-title, each point etc) for example i want to .main-title to be fast then first point to be slow, the next point fast and the last point very slow. (By point I mean each elem in forEach()) Also i have a bug on .main-title that sometimes it does jump up/down - no idea how to tackle this. Every input/tip/better approach to the whole functionality will be much appreciated, thank you guys in advance!