Leaderboard

Hey @maxvia I am no react guy, so I can not tell you on how to implement this with react, but I can show you one example of how to achieve this sort of effect. ***** Please take note of the Edit added to the bottom of this post with regard to the setup ***** It is pretty straight to get there with ScrollTrigger and this being all the JS you need for this version: gsap.set('section.footer-container', { yPercent: -50 }) const uncover = gsap.timeline({ paused:true }) uncover .to('section.footer-container', { yPercent: 0, ease: 'none' }) ; ScrollTrigger

Hey SLSCoder. I highly recommend that you read the most common GSAP mistakes and tips to animate efficiently as they both cover this issue and others that I think you'd learn a lot from. Some notes: In situations like these you want to create the animation ahead of time and use control methods to manipulate it. You should avoid putting JS functions and CSS inline. I would use semantic HTML (using a real <button element> and not using a <br> for spacing). You should use the position parameter instead of delays for tweens in timelin

Hey @maxvia Have you hooked locomotive-scroll up to ScrollTrigger via .scrollerProxy? https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.scrollerProxy() If not, check out the demo on that docs-page linked to, for an example on how to hook it up. If so, and you still cant get it working, please create a minimal demo (even without your react environment could help), so it's easier to help.

Hey @Fafaa - welcome to the forums. There is a whole lot going on in your demo. Let me start with this: Inside your createAnimation function, you shouldn't target the elements with document.querySelector() but with with socialId .querySelector() instead. This way you make sure to only target the elements inside the respective container - otherwise you would be targeting the elements throughout the document. with no specification. The way you first set up the const twitter = () => createAnimation("twitter"); ... and t

Hey @monema How exaxtly to do that depends on what exactly is needed, like; do both timelines tween on the same element? If not, something like this should be sufficient https://codepen.io/akapowl/pen/vYXYGWa If they do though, you'd need to make sure, the other timeline stops on click, and everything that has been applied so far, gets wiped, so you have no interfering values, when tweening on that element freshly ( e.g. by setting clearProps: 'all' to that element) https://codepen.io/akapowl/pen/mdrdPja Hope

Hey @chrisi51 Please take a look at tutorials on TextPath - e.g. this https://codepen.io/mikeK/pen/6fa7024ac0283e5e5715777155c9d554?editors=1010 Happy tweening ... Mikel

I'm not sure I follow everything you're trying to do in your demo, but if you just want to change the text that follows the path, the easiest thing would be to change the textContent of the text node. Here's a fork of my original demo with that example. https://codepen.io/PointC/pen/VwjJaqw Hopefully that helps. Happy tweening.

Hey @andsavu I pinned down what's important for smooth-scrollbar (mainly how to setup the scrollerProxy) horizontal scrolling in this thread And here is a pen with an example of how to integrate the skewing-on-scroll. Don't let your eyes fool you though; the sections are not being skewed at all. Depending on what type of monitor you use it might just look like it. Only the buttons are being skewed(-x) on scroll. https://codepen.io/akapowl/pen/zYBbmoX Hope this is example enough for how to combine those

Hola! @fluxus, 'There are actually a bunch of ways to do this ...' https://codepen.io/mikeK/pen/d0936c3a8de1f233e1cdbb60c6a36dc0?editors=1010 ... and just for fun - no flip https://codepen.io/mikeK/pen/OJXRyYN Happy flipping ... Mikel

Here's another option that uses Carl's clever scaleX flip idea: https://codepen.io/GreenSock/pen/2d5065165a6ca82dcd7a2ba6a80a1db4?editors=0010 There are actually a bunch of ways to do this - let us know if this works fine for you or if you need more options. Happy tweening!

Hey @Olga__Kondr In your pen you are using LESS/SCSS-Syntax for the CSS, but are not pre-processing it at all. So your &--scrolled { height: 0px; } inside of your .header is invalid. I took it out of the .header and put it like this .header--scrolled { height: 0px; } and it works just fine. https://codepen.io/akapowl/pen/BazVRKK Also note, that I added a transition and an overflow: hidden to your .header in this example.

Hey @Olga__Kondr, Look at this example https://codepen.io/mikeK/pen/36a752bc230ab2a00834148779bce4ec ... or this https://codepen.io/mikeK/pen/cd75b815a0298372fe786f66e6b1e7db?editors=0010 Happy scrolling ... Mikel

Hi, While is possible to achieve what you're trying to do I wouldn't recommend it. Scroll animations inherently depend on the scroll position, which depends on how the user interacts with the site. For example if a user scrolls midway through the first animation and stays there for 3 minutes, the audio would have ended by the time the user starts scrolling again. Also what happens if the user taps the page down key three times? The content would go down super fast so the first animation would never last 30 seconds. The point is that the way scroll is handled is something you cannot

Jey @pietM one more thing I noticed is, that if you click on a dot in the second slider for example, the indicator in the bottom left corner chanbges on both your sliders, which also is not what you want, i suppose. In your gsap.set and the tweens of your dotAnim-timeline you are targetting elements like this: '.dot' or '.title' meaning that gsap will target all the element with those classes throughout the whole document. In the following demo I added these references let allTheDots = dots.querySelectorAll(".dot"); let title = master.query

Also, if you want the movement to be constant, and not in single sprints, you should add ease: 'none' to that tween, because it has an ease applied by default. Here is @PointC's solution combined with my addition: https://codepen.io/akapowl/pen/VwKwbzX

Hi @nikki tucker Welcome to the forum. It sounds like you'd need to set repeatRefresh to true. .to(".move", 2, {x:'-=200', repeat: -1, repeatRefresh:true}) Does that help? Happy tweening.

First of all, nice job on the site! Looks beautiful. There absolutely was NOT any change to GSAP on the CDN or anything like that. We'd never do that, and CDNJS wouldn't allow it anyway. It's totally against their policy. I doubt your issue has anything to do with GSAP whatsoever - it's far more likely that a browser update caused the slowdowns. I've seen Chrome do this many times where they change their rendering strategies and sometimes it's horrible. For example, a Chrome update a long time ago suddenly changed de-accelerated 3D transforms on the Mac. They also altered the way

You can just animate the progress. And you don't need to use a timeline - just use a simple fromTo() tween for each direction: https://codepen.io/GreenSock/pen/5bab7669c11ef8400b5b56f5939d2d59?editors=0010 Is that what you mean? Just don't forget the overwrite: true on at least one of the tweens, otherwise you'll create a bunch of overlapping/competing tweens on each mouse movement. Happy tweening!

Hi, A couple of things. First you created three different posts for the same autoalpha issue, please try to keep it to just one, the admin/mod staff always try as hard as possible to answer every question as fast as possible, no need to re-post, you'll only caught out attention the wrong way. Second, I see a couple of issues in the React side of your code. Your useEffect() hook doesn't have a dependencies array passed to it as the second parameter, that means that the entire code in that block will run everytime the state of the component is updated or a prop passed to

Hi @SarahVDB Welcome to the forum. Nothing wrong with the timeline - just another approach here. You could put the repeat in the stagger object and then adjust the 'each' amount to your liking. My two cents only. YMMV. https://codepen.io/PointC/pen/RwGbzXR Happy tweening.

Hey @SarahVDB - welcome to the forums. You could use a timeline for that - with one staggered tween that moves the circles down, and another one moving them back up again - and the timeline itself repeating infinitely. Note, that I set the initial position of the circles in your CSS via transform in the demo below. Is this what you had in mind: https://codepen.io/akapowl/pen/jOMNodr

Hey @Lichay, Images with around 100 bytes would not be a problem. To execute JavaScript code when the page has fully loaded - includes things like large images - you could window.addEventListener('load', function () { alert("It's loaded!") ... })

Hey @maxvia You are using 'restart' for the onEnterBack in your toggleActions, so when you scrolled back up, the backgroundColor would tween from white to #fcefee again. What you probably mean instead is a 'reverse'. But from reading in other posts on backgroundColor changes, I can tell, that even then it would be problematic to handle the backgroundColor-change with a setup like this. Instead, you could/should setup individual tweens in the callbacks, like in this scenario https://codepen.io/akapowl/pen/GRjKGKB Give it a try, and let us know, i

Hey @vitor z, Welcome to the GreenSock Forum. You need a SVG and redraw it with GSAP DrawSVGPlugin. https://codepen.io/mikeK/pen/b6eae834c13c7b6304f83eb40249727f?editors=1010 Happy drawing ... Mikel

clearProps is literally for removing inline CSS properties of DOM elements - that's not for canvas-based stuff. If I understand your goal correctly, you don't actually want to clear the properties, right? You just want to return the properties to the pre-"from" values on that first tween in your timeline? The problem with the way you're doing it now is that you put that tween at the VERY start of the timeline, so when you pause(0), it puts the playhead right on top of where you told it to apply those "from" values. It is doing what it's supposed to. So you've got two options:

Another option might be to layer a saturated image on top of an unsaturated one and then fade in the saturated version.

Hey @Jeppe - welcome to the forums. That should be applicable pretty straightforward by using ScrollTrigger combined with a scrubbing tween. I'll leave this simple tween demo here for inspiration and as a start-point, but I leave it to you to hook it up to ScrollTrigger yourself. If you run into any problems when trying to combine ScrollTrigger with it, let us know. https://codepen.io/akapowl/pen/JjRPGqJ Note, that tweening on a filter like that might not be the most performant thing to do. Happy Scrolling.

Hey @dhaliwallambi I got your locomotive-scroll working in your demo by setting overflow: hidden to your .data-scroll-container via CSS. Your scrollTriggers on the other hand are not working in the demo, because you are not setting that div as the scroller. I can not tell you anything on the .batch method you want to use - and since I don't see anything in that direction in your code, and you actually only have those 5 images, I think what you maybe could want to do instead, is loop over those images, and create a ScrollTrigger for each of those individually.

Hey @semplicelabs, From the DOCS Warning don't animate the pinned element itself because that will throw off the measurements (ScrollTrigger is highly optimized for performance and pre-calculates as much as possible). Instead, you could nest things such that you're animating only elements INSIDE the pinned element. https://codepen.io/mikeK/pen/XWKvGjx And another option: Removing a Flash of Unstyled Content (FOUC) Happy pinning ... Mikel

Hey, The stagger is not part of the config options of ScrollTrigger, you should move it to the tween config object: let exptl = gsap.timeline({ scrollTrigger:{ trigger: ".z-out", start: "top 85%", end: "top 5%", scrub: 2, markers: true } }); exptl.from(".z-out", { x: 100, opacity: 0, stagger: 1, duration: 1 }); Finally you could explore the batch() method, I believe that would be more appropriate for what you're trying to do: https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.batch() Happy Tweening!!!

Hey @hybrid09, Last but not least: an answer to your question https://codepen.io/mikeK/pen/213590e6a0f5d5ae07d7462469ed4a7a?editors=0010 Happy weekend ... Mikel

So you want to CHANGE the timeline that's getting scrubbed? So the tween to yellow should be updated to whatever circle color you click? You could just keep a reference to that tween, make it a fromTo() so that it's sure to use the correct starting and ending values, and update its final value. Then call invalidate() to force it to flush its internally-recorded starting/ending values and snag them again on the next render, like this: https://codepen.io/GreenSock/pen/a7644bb629503ac2484b664b609ad37a?editors=0010 Is that what you're looking for? If you don't really

Yay, thanks for noticing. And thanks for being a Club GreenSock member! 🙌 Indeed, she is excellent. There are a lot of lurkers around here. Everyone is welcome. I think lurking for a while can be a wonderful way to learn. Congrats on stepping out of the shadows and posting your first question. Pretty soon you'll be answering other people's questions Happy tweening!

the trick here is to use function-based values. the demo below shows random duration and x value for each bug https://codepen.io/snorkltv/pen/yLJWgdy?editors=1010

Hi and welcome to the GreenSock forums. The easiest way to toggle a GSAP instance is to toggle it's reversed state. Normally what I do is create the Tween or Timeline paused, then after adding all the config or child instances I reverse it. Since the instance is at 0 seconds there is no change. Then you toggle the reversed() state. This code seems to work in your sample: // Timeline created and paused var tl = gsap.timeline({ paused: true }); function openNav() { animateOpenNav(); var navBtn = document.getElementById("nav"); navBtn.onclick = function (e) { // Toggle

Hey @CindyDB I fiddled around a bit, and it seems, that the background-attachment: fixed; on your .pagefill was causing the issues with the disappearing on unpin (if I got you correctly on that). Removing that background-attachment seems to resolve the issue. https://codepen.io/akapowl/pen/ExyJeMp Was this what you were talking about? That could maybe look something like this tl .addLabel("dia") .to(".pagedisolve", { autoAlpha: 0 }, 1) .to(".pagefill", { autoAlpha: 1 }, 2) .to(".pagetext", { autoAlpha: 1

Sorry about that - I believe it's fixed in the upcoming release which you can preview at https://assets.codepen.io/16327/MotionPathPlugin.min.js Better?

Hi @PG1, You could use onUpdate to check the tween's progress and apply the front class where needed. https://codepen.io/sgorneau/pen/xxOBjRz Hope this helps!

Hey @RoyM, I just did a fork, and also I replaced your masterTL by a useRef() hook, so in this way works. You can check it here: https://codesandbox.io/s/flamboyant-solomon-vdis4 const masterTL = useRef(null); useEffect(() => { masterTL.current = gsap.timeline({ repeat: -1, paused: true }); }, [masterTL]);

Nah, you could just tap into the "ratio" value to do it much more efficiently: https://codepen.io/GreenSock/pen/6b7f98ddda185f8913017077d6b58fdb?editors=0010 Think of "ratio" like the eased progress. Does that help?

Hey @pauljohnknight It is not possible to stagger a single element (.forEach). So please try var moving = document.querySelectorAll('.moving span'); gsap.to(moving, { duration: 1, y: 0, opacity: 1, stagger: .1, scrollTrigger: { trigger: moving, toggleActions: 'play pause none reset', start: '0 80%', } }) Happy staggering ... Mikel

Hey @Zahurul - welcome to the forums When/before loading that new content, you should probably first kill all the existing ScrollTriggers, something like this let triggers = ScrollTrigger.getAll(); triggers.forEach( trigger => { trigger.kill(); }); and after the new content has loaded, you could call that revealItemsOnScroll(); function you have there, again. This way you make sure, that ScrollTrigger does not target any of the old elements, but only the new ones. Hope this helps. Cheers, Paul

Hey @HiLuLiT I myself am a bit short on time right now, to take a look on your code, but the following threads actually contain demos with two different approaches to this. Maybe these examples can at least serve as inspiration meanwhile. One of them (my own) is tweening on the height of the 'images' and the other one is translating the images on the y-axis. Cheers, Paul

Thanks for the demo. I had success animating the smallBirdWrapper along the path and flipping the smallBird inside it. To accomplish this I created one tween of the birdWrapper on the path. I then built a timeline that used -tweenTo() to play the motion path tween forward -a tween to flip the scaleX of the smallBird (3D transforms aren't supported in all browsers for svg elements) -another tweenTo() to play the path animation in the other direction My demo https://codepen.io/snorkltv/pen/PozxGaE?editors=0110 My com

Hi and welcome to the GreenSock forums. The problem is that the ScrollTrigger instances that you created are still listening to the scroll event in the window object. When you navigate to another route these instances still exists (actually if you scroll up/down in the /partner route, you can see that the scroll is completely messed up). Then you navigate back to the home route and a completely new set of ScrollTrigger instances is created yet again, which make things even more complicated. What you have to do is kill the existing ScrollTrigger instances when the component is unmou

Hey @maxvia - welcome to the forums. From what I can tell, when inspecting things through dev-tools, they are simply just using 'invisible' divs with mouseenter functions attached for this. Something like this. You'd have to apply the rotation-tween to your custom cursor instead of what I did there, of course. https://codepen.io/akapowl/pen/abZaeEZ If you need information on how to setup a custom cursor in the first place, there are several threads on that in the forums already. I'll link you to this one, might be helpful.

Hey @Nysh What worked for me, was setting the span to 'display: inline-block' and also setting a width to it. span.spacer { display: inline-block; width: 85px; } This way you also don't have to worry about how many empty characters you would have to fit inside the span. Just make sure, there is at least one. <span class="spacer">&nbsp;</span> https://codepen.io/akapowl/pen/BazOxqv

Hey Yves, The main problem is that the useEffect() hook used to create the GSAP instance doesn't specify an array of dependencies, hence it runs everytime the component's state is updated, therefore the instance is created again and again, messing up the starting values that GSAP uses. Just use an empty array to run that code once when the component is first mounted and it should work as expected: useEffect(() => { playpauseTL .to(triangleRef.current, { morphSVG: squareRef.current }) .to(circleRef.current, { fill: '#00efeb' }, '-=0.3') .reverse() }, [])

It's always tough to dig through all the code in a live site with tons of other things on the page, so if you need some help with this in the future, please create a minimal demo with just that flickering animation in a CodePen (or something similar), but I did peek at the code and here's your problem I believe: .to(['#run-15', '#run-14', '#run-13', '#run-12', '#run-11', '#run-10', '#run-9', '#run-8', '#run-7', '#run-6', '#run-5', '#run-4', '#run-3', '#run-2', '#run-1'], .01, {opacity: 1, stagger: {each: .05, repeat: 1, repeatDelay: .04, yoyo: true}}); You've got each element an

Hey @ngrmm, That could be the job of the ScrollToPlugin https://codepen.io/mikeK/pen/rNxwpOm?editors=1010 Happy scrolling ... Mikel