Search the Community

While I was setting up scroll triggers on a local environment they were working fine, but when I placed the code on the page for some reason <p> elements weren't animating. I triple checked the loading order and everything was correct. When I refreshed the page after scrolling to the bottom everything worked fine. So I tried setting the problematic elements to gsap.set("#p01, #p02, ...", { opacity: 1 }); before the gsap.from calls and it fixed these elements not animating. I still don't know why it was only affecting <p> elements. Maybe the rich text editor in Umbraco was hindering it, but the added .set step fixed it.

Hello Everyone My Gsap working correctly with scroll trigger on desktop however not working correctly on mobile As you can see in video, on mobile scroll trigger not work well and I think the issue have relationship with start and end Any idea to fix it ? I attached demo link Desktop : https://streamable.com/bg7m8s Mobile : https://streamable.com/jvksfn My Code Snippet export const fadeInUp = ( element: HTMLElement, isScroll: boolean, delay?: number ) => { const fromOptions = { opacity: 0, y: 50, }; const toOptions = { opacity: 1, y: 0, delay: delay, duration: 1, }; if (isScroll) { const scrollToOptions = { ...toOptions, scrollTrigger: { trigger: element, toggleActions: "play none none reverse", start: "top 60%", // Adjust the start value for mobile end: "top center", markers : true }, }; return gsap.fromTo(element, fromOptions, scrollToOptions); } return gsap.fromTo(element, fromOptions, toOptions); }; Thank you

Hello everyone, I'm trying to do this effect (the one with the four cards): https://www.botify.com/ I'm having trouble and need some advice to succeed. Thank you for your help

Here is the staging site: https://ecoshift-a7931d-3eeb658156c6e56a2856d0e.webflow.io/ We are just testing how GSAP works and bought some code over from an existing Wordpress site. Ignore the styling - we are just focusing on animations right now for testing purposes to see if Webflow is the move for us. I've tested everything under the sun, and even modified working code from the wordpress site to see if I can somehow get it to work on Webflow - but nothing works. I've tried a few different versions of the same code: "use strict"; (function ($) { let largeFlowerSVGs = document.querySelectorAll('.large-logo-svg'); let listItems = document.querySelectorAll('.split-list-item'); console.log("The js file is being loaded"); console.log(listItems); console.log(largeFlowerSVGs); init(); function animateFlowerSVGs() { if (!largeFlowerSVGs.length) { return; } gsap.utils.toArray('.large-logo-svg').forEach((largeFlowerSVG) => { // Progressively enhance animation // Animation will be only triggered if JS is loaded on the page largeFlowerSVG.classList.add('gsap-loaded'); let animationSequence = gsap.timeline({ scrollTrigger: { trigger: largeFlowerSVG, start: 'center bottom-=200', // The SVG will be given this clrolled into view // It will also be given this class if the section was already scrolled pass on page load toggleClass: 'has-been-scrolled', once: true } }); }); } function animateListItems() { if (!listItems.length) { return; } Array.from(listItems).forEach((splitListItem) => { // NOTE: Progressive enhancement isn't needed here since GSAP works well with HTML (non-SVG elements) // Progressively enhance animation // Animation will be only triggered if JS is loaded on the page splitListItem.classList.add('gsap-loaded'); let listItems = splitListItem.querySelectorAll('.split-list-item'); Array.from(listItems) // Set a scrolltrigger for each element to ensure the scroll animation only occurs as // each element comes into view .forEach((listItem) => { gsap.from(listItem, { yPercent: 10, opacity: 0, duration: 0.3, scrollTrigger: { trigger: listItem, start: 'top bottom-=250', toggleClass: 'has-been-scrolled', once: true } }); }); }); } function init() { gsap.registerPlugin(ScrollTrigger); window.addEventListener('load', function () { animateFlowerSVGs(); animateListItems(); }); } })(jQuery); "use strict"; let largeFlowerSVGs = document.querySelectorAll('.large-logo-svg'); let listItems = document.querySelectorAll('.split-list-item'); console.log("The js file is being loaded"); console.log(listItems); console.log(largeFlowerSVGs); init(); function animateFlowerSVGs() { if (!largeFlowerSVGs.length) { return; } gsap.utils.toArray('.large-logo-svg').forEach((largeFlowerSVG) => { // Progressively enhance animation // Animation will be only triggered if JS is loaded on the page largeFlowerSVG.classList.add('gsap-loaded'); let animationSequence = gsap.timeline({ scrollTrigger: { trigger: largeFlowerSVG, start: 'center bottom-=200', // The SVG will be given this clrolled into view // It will also be given this class if the section was already scrolled pass on page load toggleClass: 'has-been-scrolled', once: true } }); }); } function animateListItems() { if (!listItems.length) { return; } Array.from(listItems).forEach((splitListItem) => { // NOTE: Progressive enhancement isn't needed here since GSAP works well with HTML (non-SVG elements) // Progressively enhance animation // Animation will be only triggered if JS is loaded on the page splitListItem.classList.add('gsap-loaded'); let listItems = splitListItem.querySelectorAll('.split-list-item'); Array.from(listItems) // Set a scrolltrigger for each element to ensure the scroll animation only occurs as // each element comes into view .forEach((listItem) => { gsap.from(listItem, { yPercent: 10, opacity: 0, duration: 0.3, scrollTrigger: { trigger: listItem, start: 'top bottom-=250', toggleClass: 'has-been-scrolled', once: true } }); }); }); } function init() { gsap.registerPlugin(ScrollTrigger); window.addEventListener('load', function () { animateFlowerSVGs(); animateListItems(); }); }; let largeFlowerSVGs = document.querySelectorAll('.large-logo-svg'); let listItems = document.querySelectorAll('.split-list-item'); console.log("The js file is being loaded"); console.log(listItems); console.log(largeFlowerSVGs); init(); function animateFlowerSVGs() { if (!largeFlowerSVGs.length) { return; } gsap.utils.toArray('.large-logo-svg').forEach((largeFlowerSVG) => { // Progressively enhance animation // Animation will be only triggered if JS is loaded on the page largeFlowerSVG.classList.add('gsap-loaded'); let animationSequence = gsap.timeline({ scrollTrigger: { trigger: largeFlowerSVG, start: 'center bottom-=200', // The SVG will be given this clrolled into view // It will also be given this class if the section was already scrolled pass on page load toggleClass: 'has-been-scrolled', once: true } }); }); } function animateListItems() { if (!listItems.length) { return; } Array.from(listItems).forEach((splitListItem) => { // NOTE: Progressive enhancement isn't needed here since GSAP works well with HTML (non-SVG elements) // Progressively enhance animation // Animation will be only triggered if JS is loaded on the page splitListItem.classList.add('gsap-loaded'); let listItems = splitListItem.querySelectorAll('.split-list-item'); Array.from(listItems) // Set a scrolltrigger for each element to ensure the scroll animation only occurs as // each element comes into view .forEach((listItem) => { gsap.from(listItem, { yPercent: 10, opacity: 0, duration: 0.3, scrollTrigger: { trigger: listItem, start: 'top bottom-=250', toggleClass: 'has-been-scrolled', once: true } }); }); }); } function init() { gsap.registerPlugin(ScrollTrigger); window.addEventListener('load', function () { animateFlowerSVGs(); animateListItems(); }); }; window.Webflow ||= []; window.Webflow.push(() => { (function ($) { let largeFlowerSVGs = document.querySelectorAll('.large-logo-svg'); let listItems = document.querySelectorAll('.split-list-item'); console.log("The js file is being loaded"); console.log(listItems); console.log(largeFlowerSVGs); init(); function animateFlowerSVGs() { if (!largeFlowerSVGs.length) { return; } gsap.utils.toArray('.large-logo-svg').forEach((largeFlowerSVG) => { // Progressively enhance animation // Animation will be only triggered if JS is loaded on the page largeFlowerSVG.classList.add('gsap-loaded'); let animationSequence = gsap.timeline({ scrollTrigger: { trigger: largeFlowerSVG, start: 'center bottom-=200', // The SVG will be given this clrolled into view // It will also be given this class if the section was already scrolled pass on page load toggleClass: 'has-been-scrolled', once: true } }); }); } function animateListItems() { if (!listItems.length) { return; } Array.from(listItems).forEach((splitListItem) => { // NOTE: Progressive enhancement isn't needed here since GSAP works well with HTML (non-SVG elements) // Progressively enhance animation // Animation will be only triggered if JS is loaded on the page splitListItem.classList.add('gsap-loaded'); let listItems = splitListItem.querySelectorAll('.split-list-item'); Array.from(listItems) // Set a scrolltrigger for each element to ensure the scroll animation only occurs as // each element comes into view .forEach((listItem) => { gsap.from(listItem, { yPercent: 10, opacity: 0, duration: 0.3, scrollTrigger: { trigger: listItem, start: 'top bottom-=250', once: true } }); }); }); } function init() { gsap.registerPlugin(ScrollTrigger); window.addEventListener('load', function () { animateFlowerSVGs(); animateListItems(); }); } })(jQuery); }); My test console.logs are showing on the console, and everything points to the animations working. However, the animations themselves just won't show on the computer.

pinning a section with lottie animation with scrolltrigger offsets the start and end value of the other scrolltrigger https://codepen.io/wetwhite/pen/wvbeyBy

My Problem: I can't make the transition between the two animations in my CodePen so that they are combined into a single smooth animation. What I'm Looking for in the Animation: Global Animation: The two animations below should be combined into a single smooth animation. Resize on Scroll: During scrolling, a div should resize until it reaches a certain size on the left side. Text Appearance: Once the size is reached, text should appear on the right side. Image Change: For each section of text, a new image should appear. Technical Details: Div Resizing: The div should gradually change size based on scrolling until it reaches a predefined width on the left side of the screen. Text Appearance: The text should appear smoothly after the div has reached its final size. Each section of text corresponds to a different scroll step. Image Change: Each new section of text should trigger the appearance of a new image. What I've Tried So Far: GSAP ScrollTrigger: I've used GSAP ScrollTrigger to try and trigger the animations on scroll. I managed to resize the div, but then I can't get the text to scroll alongside it. GSAP Timeline: I tried creating a timeline with GSAP to sequence the animations, but I'm having trouble synchronizing the text appearance and image change with the div resizing. CSS Transitions: I also tried using CSS transitions for resizing, with a fixed position. Additional Information: Sketch: I have attached a sketch to help illustrate what I'm aiming for. YouTube Link: Here is a YouTube link showing the expected result in two parts after resizing: Youtube Link :

Hello, I would love to make this kind of animation, but im new to GSAP and for some reason my head wont cooperate. Does anyone have any good tips? 07f6f16c-bc28-4506-983c-caf435ade110.mp4

Hello everyone, basically I'm trying to create a glassmorphism card that appears while scrolling, as you can see in the code pen there is a circle, when you scroll the card show with a rotating animation, the problem is that during the animation the backdrop blur effect doesnt work but it works only when the animation finish What I've tried: -removing autoAlpha: 0 -adding position relative instead of static to make z-index work -adding backdropFilter to gsap animation any kind of help would be awesome thank you all!

Hello, As someone who has never really used Gsap in production, I'm struggling a little. The client would like something similar to https://wearemotto.com/about/, this section in the screenshot… I have created this pen of my poor effort so far! https://codepen.io/grantsmith/pen/XWGxrBN Some pointers would be very much appreciated

How can i chain timelines which waits for the last one to finish? Do i have to calculate manually the length of the last timeline added with tl.add(tl1) (tl1.duration())? I would like to play the added timelines as "chained clips", same behavior as tl.to() or tl.from(), but for timelines, not individual animations. const tl1 = getMy10sAnimation1() //gsap.timeline() ...to().to().to()... const tl2 = getMy2sAnimation1() //gsap.timeline() const tl3 = getMy7sAnimation1() //gsap.timeline() const masterTl = gsap.timeline({repeat: -1}) .add(tl1) .add(tl2) .add(tl3) // expected result: // ----------- // -- // --------- // repeat // but i get: // ----------- // -- // -------

Hello GSAP community, I'm new to GSAP and struggling with making an element follow an SVG path while scrolling. The element isn't properly aligned and the animation feels off during scrolling. Any quick tips on getting it to align correctly with the path and ensuring smooth scrolling animation? Your guidance is much appreciated!

Hey GSAP team, I have finally implemented this awesome animation thanks to Scrolltrigger. There is something weird we are experiencing on iOS devices though. The video seems to snap back without finishing the video and when scrolled down scale/grow on its own without interacting. I made an screen recording to give a better idea as everything is working fine in codepen and desktop devices. https://www.dropbox.com/scl/fi/523nany5speehrbfp06jp/RPReplay_Final1698089823.mp4?rlkey=0242obc90ektonmk3mocykzk5&dl=0 The animation is set up as; <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script> <script> const video = document.querySelector('.section-pin video source'); if (window.matchMedia("(max-width: 991px)").matches) { video.src = video.dataset.tabletSrc; } else if (window.matchMedia("(max-width: 767px)").matches) { video.src = video.dataset.mobileSrc; } else { video.src = video.dataset.src; } video.closest('video').load(); video.closest('video').play(); ScrollTrigger.defaults({ markers: false }); ScrollTrigger.create({ trigger: ".scale-video-wrapper", start: "top top", end: '+=1000', pin: '.section-pin' }); const tl = gsap.timeline({ scrollTrigger: { trigger: ".scale-video-wrapper", start: "top top+=100px", end: "+=1000px", toggleActions: "play reverse play reverse" // scrub: true } }); tl.to(".video", { duration: 0.2, scale: 1, // ease: "none", ease: "power4.in" }); function onVideoHasEnded() { tl.reverse(); } </script> <script> document.querySelector('.section-pin video').addEventListener("ended", function() { onVideoHasEnded() }); </script> Here is a prototype link for own testing if needed; https://glasnu-nl-20.webflow.io/glasnu-nl/video Any idea what could be causing this? Thanks in advance!

Hello, I'm new to GSAP and web development. I'm trying to learn GSAP, and I'm facing an issue where animations load when I scroll using my computer mouse, but on my touchscreen phone, it's just blank.Sorry if my code is messy or not optimized. I initially thought it was a phone issue, but after testing in developer tools, I found that when I drag the screen as we do on touch devices, the animations don't work. However, everything works perfectly when I use a mouse to scroll. Any insights on how to make animations work on touch devices?

I have an infinite marquee, that i thought was working, however it jumps at the very end slightly, im not quite sure why im wondering based on the code provided below if theres anything that looks wrong in what im doing? JSX File: const MobileMarquee = ({ client }) => { // NOTE • Refs const main = React.useRef(); const first = React.useRef(); const last = React.useRef(); React.useLayoutEffect(() => { const ctx = gsap.context(() => { // Split characters const split = new SplitText(first.current, { type: "chars", charsClass: "char", }); // Split characters count + timing calculation const charsTotal = split.chars.length; const timingFactor = charsTotal * 0.25; let timeline1 = gsap.timeline(); let timeline2 = gsap.timeline(); timeline1.fromTo( first.current, { xPercent: 0, }, { xPercent: -100, repeat: -1, duration: timingFactor, ease: "none", } ); timeline2.fromTo( last.current, { xPercent: 0, }, { xPercent: -100, repeat: -1, duration: timingFactor, ease: "none", } ); }, main); return () => ctx.revert(); }, []); return ( <Jacket isPaused={isPaused} ref={main}> <div> <ul ref={first}> {words.map(({ word, uid }) => ( <li key={uid} className="el"> {word}&nbsp;–&nbsp; </li> ))} </ul> {/* Dupl */} <ul aria-hidden="true" ref={last}> {words.map(({ word, uid }) => ( <li className="el" key={uid}> {word}&nbsp;–&nbsp; </li> ))} </ul> </div> </Jacket> ); }; CSS/JS: // Imports // ------------ import styled, { css } from "styled-components"; // Exports // ------------ export const Jacket = styled.h1( (props) => css` position: relative; z-index: 3; overflow: hidden; width: 100vw; div { display: flex; width: fit-content; } ul { display: flex; width: fit-content; position: relative; justify-content: flex-start; transform: translateX(0); li { display: flex; align-items: center; font-weight: ${props.theme.font.weight.reg}; font-family: ${props.theme.font.type.heading}; font-size: 6rem; line-height: 1.2; color: ${props.theme.colors.brand.bc4}; user-select: none; white-space: nowrap; } } ` ); Codesandbox Recreation: https://codesandbox.io/s/react-hooks-example-w-clicker-t6yno?file=/src/pages/index.js Kapture 2023-05-25 at 23.24.09.mp4

I have applied id="smooth-wrapper" and id="smooth-content" by wrapping with div. But it is not working. I followed https://codesandbox.io/s/stupefied-minsky-pzceim?file=/src/App.js:733-752 but couldn't understand how to apply ScrollSmoother in these component based structure.

Hello Guys, it's my first Forum Article. I'm using GSAP for nearly a year now. I'm using GSAP + GsapSmoothScroll + ScrollTrigger and Barba.js I have some slightly complex Animations on my Site and its extremely laggy on iPhone Safari I tried a lot of Solutions that I found hear, but nothing really works. Does someone have some Ideas how to fix. Here is a Link to the Website: This is my config for the ScrollSmoother. The Lag is specially on the page uid42 thats the link i put in hear. The other pages are ok not perfekt but ok: I hope its enough information. scroll = ScrollSmoother.create({ smooth: 0.2, // how long (in seconds) it takes to "catch up" to the native scroll position effects: true, // looks for data-speed and data-lag attributes on elements ignoreMobileResize: isMobile() && !document.querySelector("#uid1") ? true : false, normalizeScroll: isMobile() && !document.querySelector("body:not(#uid42)") ? true : false, }) On a Mission (hantha.net) Hope someone could help me.

code sandbox link (I was messing with this file and forgot to fork it, so I apologize, the file is now as it should be) In my little basic nextjs demo here (link above), I have set up an idea for a page I have where it would use a fixed position layout as you see here. I have three questions that are hopefully not too long: 1. Is this a good way to set up such a layout with gsap (using stacked, standard flow elements, in this case, the yellow and green lines in the middle of the page (which would be hidden in the actual site) to trigger the scrolling animation) or do you think there is a better way to achieve this? 2. If I scroll any amount of distance and hit refresh, the page doesn't reload from the beginning it just reloads and the scroll bar remains in place. What should I do to make it start back from scratch when I refresh the page? 3. I was trying out smooth-scroller, got it to work and it's very nice of course; however, If I have A setup like this in nextjs with these fixed elements which the smooth-scroller docs say to put outside the smooth content wrapper, I would have the main content in a wrapper (this wrapper would have smooth-scroller) then the fixed elements in their own parent div and then wrap all of that in say a react fragment or div because of course this is react and all components must only render one element. But when I do that smooth-scroller doesn't work anymore, So I'd love to see how smooth-scroller would get applied to this setup. Also, is there a way to make smooth-scroller work in code sandbox?

Hi, I've been trying to get something to work and after browsing the forums and google, reading a lot of topic and trying a lot of things. I am currently at a roadblock where I have no clue how to continue. Explanation I have a wrapper and 3 sections, what I envision is that my wrapper is pinned and my first section is always visible on load (this works). Upon scrolling down I want to fade out my first section and fade in the second section with a scrub (this also work). Now where I am stuck is, is that I want to have specific elements within the section to fadeIn and stagger and/or add a class when said section is currently active. I already tried using 'toggleClass()' but this seems to work globally and not per section that fades in. Here's a codepen of what I currently have. Any help is appreciated!

Hello! my specific problem is that I'm trying to figure out how to disable ScrollTrigger animation when the screen width is under 800px. My guess is that I have to use matchMedia? and maybe .disable()? But I can't really get it to work. Any help is appreciated! I recreated the issue in the provided Codepen

Hello! Im having trouble dynamically updating the value of the endScale, currently it is 0.2; but i am after an effect where the scale updates and changes based on window resize function(). I have tried implementing this but unfortunately having a few troubles.

Hi, I am working on a box system that users can open and have an animation to show what they have won. At the moment it is not working. const wrapper = document.querySelector(".c-container"); const boxes = gsap.utils.toArray(".c-item"); const wins = gsap.utils.toArray(".win"); let itemWidth = boxes[0].clientWidth; let wrapWidth = boxes.length * itemWidth; function getRandomInt(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; } function getPosWinner(winner) { const boxes = gsap.utils.toArray(".c-item"); const index = boxes.findIndex((box) => (box = winner)); console.log(index); let itemWidth = boxes[0].clientWidth; let wrapWidth = boxes.length * itemWidth; let desiredStart; if (index === 0) { desiredStart = 0; } else { desiredStart = index * itemWidth; } let minDistanceToEdgeAllowed = 4; var desired = winner; var minPos = desiredStart + minDistanceToEdgeAllowed; var maxPos = desiredStart + itemWidth - minDistanceToEdgeAllowed; return getRandomInt(minPos, maxPos); } var spin; spin = gsap.timeline({ smoothChildTiming: true, autoRemoveChildren: true, //onComplete: openModal }); spin.set(boxes, { x: (i) => i * itemWidth, }); var pos = getPosWinner(wins[0]); spin.to(boxes, { duration: 7, delay: 0.2, ease: "circ.inOut", x: "-=10000", modifiers: { x: (x, target) => { const s = gsap.utils.wrap( -itemWidth, wrapWidth - itemWidth, parseInt(x) ); return `${s}px`; }, }, }) .to(boxes, { duration: 3, ease: "none", x: pos * -1, }); console.log(wins[0]); function openModal() { var myModal = document.getElementById("WinItem"); const modal = new Modal(myModal); modal.show(); } The JS code <div class="slider-container shadow rounded"> <BIconCaretDownFill class="fs-2 trigger" /> <BIconCaretUpFill class="fs-2 triggerTwo" /> <div class="c-container pt-1"> <div class="boxes"> <div v-for="item in lootItems" :key="item"> <div class="c-item" :class="{ win: item._id === winningItem }"> <LootboxContent class="lootboxItem text-light" :loot="item" /> </div> </div> </div> </div> </div> The container with items I start with making a array of items that people can win these items are inside the container. then I get the pos of the winning item. when I got that I spin the boxes a couple of times and then it should stop at the winning object (in the middle of the container) how it looks right now How it looks after its finished Hope you can help me. Thanks in advance edit: simplified codepen: https://codepen.io/nightfly-student/pen/OJQvGzN

I am trying to apply tweens to several elements into an array that I am looping though. I have created 4 timelines, two entrances and two exits for two sets of items. I am getting this error on the first timeline (assuming it would apply to all four) I can't use a codepen link because I am doing this in SL for a client. But I can at least post the source code. I assume there is something simple but I am just not seeing it. const player = GetPlayer(); const menuOpen = player.GetVar('boolean_menuOpen'); const menu = document.querySelectorAll("[data-acc-text='TOC-Modal']"); const searchFor = 'TOC-Modal-Slide'; const accessibilityItems = document.querySelectorAll("[data-acc-text]"); const slides = []; const menuReady = (bool) => { return bool; }; const slidesReady = (bool) => { return bool; }; const showButton = (bool) => { return bool; }; const menuEntrance = gsap.timeline({paused: true, defaults: { duration: 0.5, scaleX: 0, scaleY:0, opacity: 0, ease:"back.inOut(1.2)" } }); const menuExit = gsap.timeline({paused: true, defaults: { duration: 0.5, scaleX: 1, scaleY:1, opacity: 1, ease:"back.inOut(1.2)" } }); const slidesEntrance = gsap.timeline({delay: 0.1, paused: true, defaults: { duration: 0.25, scaleX: 0, scaleY:0, opacity: 0, ease:"back.inOut(1.2)" } }); const slidesExit = gsap.timeline({delay: 0.1, paused: true, defaults: { duration: 0.25, scaleX: 1, scaleY:1, opacity: 1, ease:"back.inOut(1.2)" } }); menu.forEach((item) => { item.style.opacity = 0; item.style.transformOrigin = 'center'; console.log(typeof item) if(!menuOpen) menuExit.to(item, { onComplete: menuReady, onCompleteParams: true }); else menuEntrance.to(item, { onComplete: menuReady, onCompleteParams: true }); }); accessibilityItems.forEach((item) => { if(item.getAttribute('data-acc-text').includes(searchFor)) slides.push(item); }); slides.sort((a,b) => { const valueA = a.getAttribute('data-acc-text').split('-')[3]; const valueB = b.getAttribute('data-acc-text').split('-')[3]; return valueA - valueB; }); slides.forEach((slide) => { slide.style.opacity = 0; console.log(typeof slide) if(!menuOpen) { slidesExit.to(slide, { opacity: 0, onComplete: slidesReady, onCompleteParams: true }); player.SetVar('boolean_menuAnimationComplete', false); } else { slidesEntrance.to(slide, { opacity: 1, onComplete: slidesReady, onCompleteParams: true }); player.SetVar('boolean_menuAnimationComplete', true); } }); if(menuReady && slidesReady) { if(!menuOpen) { menuExit.play(); slidesExit.play(); } else { menuEntrance.play(); slidesEntrance.play(); } }

Hello Everyone I Want a Jelly Blob which Follows the Mouse and Squuezes and Rotates To Match the Mouse Move Direction The Probelm is The When The Angle of Rotation Switches from 0 to 180 or -180 or from -180 to Positive, The Jelly Blob Changes Direction Suddenly Giving a Jittery And Bad Animation. You can test this out by just Following the Mouse in a Circular Motion, and The Jelly Blob will keep Switching Direction . If Anyone Can Fix This it Would be very Helpful Thanks In Advance.

Hi! I'm new to javascript and found gsap while trying to animate some objects. I was trying to animate this sequence of squares to create a gallery effect but the result is very unpredictable, sometimes works all fine, but when i hover from one square to another some squares don't reverse the animation and end up in wrong positions. It's like if when i play a timeline right after another, and both timelines have animations to a certain objetc, the first timeline overrides the second and then, the objects end in the wrong position. How can i avoid this? Another issue i'm having is that i wanted both properties "scale" and "transform" to change the object simultaneously (i believe this way the animation would be smoother), but the way it is, the object first scales and then transforms. Does anyone knows what am I missing? Thanks a lot!

I've been struggling with the issue for 3 days, rewriting, refactoring code few times. Please help me if possible, guys. I use ReactJS and GSAP to create different computed animations ( overlays over a video ). What happens is that when I seek to specific percentage completed, for example 0.19 out of 49s timeline total length, it does seek to the first 1s part of the animation timeline cycle, and doesn't show the animation at the stage expected based on the progress percentage. I couldn't upload project to codesandbox as 1) it is nda signed and 2) it says that it has exceeded the 500-module items limit; I'm really sorry for that. Could someone please help me? I can share the source code or give access to my github repository. Thanks in advance everyone! import gsap from 'gsap'; import RightTitleStyles from '../../../../styles/right-title.module.css'; import React from 'react'; interface RightTitleProps { range: Object; name: string; currentTime: number; isPreview: boolean; type: 'smaller' | 'bigger'; isVisible: boolean; style: any; subtitle: string; title: string; } const RightTitle = React.memo( ({ videoRef, setStyle, range, name, currentTime, isPreview, type, isVisible, style, title, subtitle, }: RightTitleProps) => { const titleRef = React.useRef(); const { current: tl } = React.useRef(gsap.timeline({ paused: true })); const [ rangeIntervals, setRangeIntervals ] = React.useState< Array< number > >( range.timeIntervals ); const connectTitleRef = ( el : HTMLElement ) => { if (titleRef.current || !el || !videoRef || isPreview ) { if ( isPreview || !el || rangeIntervals === range.timeIntervals ) { return; } else { tl.killAll(); // just clearing out some tweens for repeated recreation } } tl.progress(1 - (range.timeIntervals[1] - currentTime) / (range.timeIntervals[1] - range.timeIntervals[0])); titleRef.current = el; console.log( titleRef.current.id, videoRef, ); console.log('configuring...'); tl.fromTo(videoRef, { width: '100%' }, { duration: 1, width: '63%' }).to(videoRef, { duration: range.timeIntervals[1] - range.timeIntervals[0] - 1 - 1, width: '63%' }).to(videoRef, { duration: 1, width: '100%' }); console.log( 'video configured', ); tl.fromTo( el, { x: name === 'Right Title' ? 150 : -150 }, { duration: 1, x: 0 }, ) .to(el, { x: 0, duration: range.timeIntervals[1] - range.timeIntervals[0] - 1 - 1, }) .to(`#${ el.id }`, { duration: 1, x: name === 'Right Title' ? 150 : -150, }); console.log(range.timeIntervals[1] - range.timeIntervals[0] - 1 - 1); }; // console.log( style, ); React.useEffect(() => { if (!titleRef.current || isPreview) return; console.log( 'styles applied to titleRef', titleRef.current._gsTransform ); console.log( 'these are tweens', tl.getChildren().map( child => child.vars.x || child.vars.width ) ); console.log( 'these are tweens', tl.getChildren().map( child => child.vars ) ); if (!(range.timeIntervals[0] <= currentTime && currentTime <= range.timeIntervals[1])) { console.log( 'current timing doesn`t fit the intervals' ); setStyle({}); tl.progress(0); return; } setStyle({ marginLeft: name === 'Left Title' ? 'auto' : 'unset', marginRight: name === 'Right Title' ? 'auto' : 'unset', }); tl.progress(1 - (range.timeIntervals[1] - currentTime) / (range.timeIntervals[1] - range.timeIntervals[0])); console.log(range.timeIntervals[1] - range.timeIntervals[0] - 1 - 1) console.log( currentTime, range.timeIntervals, 1 - (range.timeIntervals[1] - currentTime) / (range.timeIntervals[1] - range.timeIntervals[0]), ); }, [range.timeIntervals, currentTime]); const show = isVisible; if ( isPreview ) { return <div style={{ top: type === 'smaller' && 0, height: type === 'smaller' && '100%', ...style }} className={RightTitleStyles.aligningWrapper} > <div style={{ transform: isPreview && 'scale(0.55)' }}> <h1> {title} </h1> <p> {subtitle} </p>{' '} </div> </div> } return ( <div ref={ connectTitleRef } id={`${isPreview ? 'previewMode' : 'notPreviewMode'}3${range.color.slice(1)}`} style={{ visibility : !( currentTime + 1 >= range.timeIntervals[0] && currentTime - 1 <= range.timeIntervals[1] ) ? 'hidden' : 'visible', top: type === 'smaller' && 0, height: type === 'smaller' && '100%', ...style }} className={RightTitleStyles.aligningWrapper} > <div style={{ transform: isPreview && 'scale(0.55)' }}> <h1> {title} </h1> <p> {subtitle} </p>{' '} </div> </div> ); } ); export default RightTitle; Title.tsx animation.tsx