Search the Community

Hey y'all! I'm trying to pull off this effect where the background color of the page changes when you scroll in and out of new sections. I saw this demo that used `onToggle` to pull of a similar effect, but I'd really like to still leverage the `scrub` feature of ScrollTrigger, and it's my understanding that it doesn't work with toggle actions: https://codepen.io/GreenSock/pen/OJoROgY In my simplified demo below I'm attempting to just do it by looping over each section and applying a `.to()` animation on the common background element, but it seems like every time a new section/trigger is activated the `.to()` animation resets the background color of the element to its initial value, rather than just starting from the current background-color value of the element—which is why in my demo you see it flash back to red after each new section is entered. I feel like I'm close, and probably just missing something obvious. Any ideas out there in GSAP land? Thanks for your help!

Here is the demo, I've got everything just about where I want it except I'd like for the logo, and its section to move to the top and be pinned there after its construction triggered by "DomContentLoaded" while the other sections scroll as they do now below it. Sure this is a simple thing to do but not having luck moving anything with the .to method. Thanks for the help this is pretty cool, taking me back to my flash days! https://codepen.io/RandyHowk/pen/pvooMMd

I've got some flying blocks that fly in random directions, and I want them to settle down on top of a particular block with the ID "destination". Here's the issue: I'm calculating the offsets between the destination block and the flying block, subtracting these to determine the distance needed to reach the destination. When I trigger the function that moves the flying block on top of the destination after starting the animation, it correctly figures out where to go. However, the gsap.to function fails to get the flying block to the right spot. Could someone help me with this? Here's the link to the project. Unfortunately, I can't use CodePen because this project is based on React. I'd appreciate any assistance in fixing this issue. Thanks!

Hey everyone, So as you'll see I have a sidebar menu that when you click on the anchors it scrolls to the section. However the entire menu moves when you click on the anchor. I'm imagining this might be caused by the fact the navigation bar is inside the scrollAreaWrapper and scrollContent div. So either there is something I'm missing or I need to move the navigation somewhere else. Any guidance or help would be appreciated. Thank you, Dilion Smith

Dear Greensock community, i've been trying to make a analog clock, that uses animations from tweenmax. I saw this thread and decided to use parts of that code The clock works when refreshing the page continuously but the hole point of this clock is to just run by itself instead of having to refresh the page 1000 times. I tried to use a setinterval function but that breakes the animation. So in short: the clock as of now does not update, it stays static, only refreshing makes the analog pointers move. How do i make them move like a normal clock. Here's the code that i made using the thread/post above. $(document).ready(function() { var datetime = new Date(), h = datetime.getHours(), m = datetime.getMinutes(), s = datetime.getSeconds(); var myPointerH = $('.clockH'); var myPointerM = $('.clockM'); var myPointerS = $('.clockS'); var oneSecond = 60/60; // 1 second var oneHour = 60 * 60; //1 hour tween var twelveHours = 12 * 60 * 60; //12 hour tween var hourTween = TweenMax.to(myPointerH, twelveHours, {rotation:"360_cw", ease:Linear.easeNone,repeat:-1, paused:true}); var minuteTween = TweenMax.to(myPointerM, oneHour, {rotation: "360", ease:Linear.easeNone, repeat:-1, paused:true}); var secondsTween = TweenMax.to(myPointerS, oneSecond, {rotation: "360", ease:Linear.easeNone, repeat:-1, paused:true}); function showTime(){ minutesAsSeconds = m * 60; hoursAsSeconds = h * 60 * 60; secondsAsSeconds = s / 60; hourTween.progress(hoursAsSeconds / twelveHours); minuteTween.progress(minutesAsSeconds / oneHour); secondsTween.progress(secondsAsSeconds / oneSecond); console.log(hourTween, minuteTween, secondsTween); } showTime(); setInterval(function() { showTime(); }, 1000); }); Kind Regards, Hakiko