Leaderboard

oh, ok, probably best to continue in that thread. It was very nice for @Ali Manuel to help you but we don't typically have the capacity to rebuild other people's projects on demand with new specifications. While I'm here though I believe making this full-screen will require some significant changes to the CSS and it's not really something that you would do with GSAP. If you have a question related to GreenSock animation please don't hesitate to ask.

Okay, I think I get it. I made a couple demos for you. I used a wider path just so it's easier to see what's happening. You could use gradientTransform like in your 2nd demo, but I'm not sure that gets the desired result and I have no idea about browser compatability on that one. https://codepen.io/PointC/pen/a774175618d8c17aa07fcd59e28119ed My preference would be to animate the x1/x2/y1/y2 attributes. I'd also use objectBoundingBox (default) for the gradientUnits. In this case I find it a bit easier to use values from 0 → 1 rather than keep track of a

That demo is really old, and is not meant to be an accurate representation of a timeline. It was for a video just to explain some concepts. Most of the stuff in there is hard coded. Just comment out the all the JS all you will see.

If you're using ScrollTrigger, have you looked at invalidateOnRefresh property? https://codepen.io/cassie-codes/pen/8a2b93488881f6b89f6c82d8b4eac40c

The 'cuts' in your path are because the stroke is overflowing the SVG. Here's a little example. The SVGs are 100x100 with a circle radius of 50. I've outlined the SVGs with a red dotted stroke so you can see what's happening. You can see the circle with a fill pushes right up to the edge in the first SVG. Now adding a stroke will cause problems because strokes are center aligned. Meaning half of the stroke will be outside the viewBox. You can see the 20 unit stroke is partially cut off in the second SVG. The third SVG is the same as the 2nd but I've set the SVG overflow to visible.

Yeah - sorry about that. I didn't see the part about delay. duration, delay and stagger do not refresh. In this case you'd probably want to create the animation in a function and then onComplete call the function again. Does that make sense? Happy tweening.

@Alex Lopez sure you can do that. I'd recommend going through the ScrollTrigger docs and demos to see how it's done. https://greensock.com/docs/v3/Plugins/ScrollTrigger https://greensock.com/st-demos/ Happy scrolling.

Hey @codenub You can not have multiple elements in your markup with the same ID - so you might want to consider giving the elements you want to skew on scroll a specific class instead and target that class in your JS instead of an ID ( as it also is the case in the demo where you likely got the code for this ). Then you will still have the problem that there is a pinning section in between that can not be accommodated for since in your JS you are creating the horizontal-fake-scrolling ScrollTrigger after your skewing-ScrollTriggers. So you would either have to change th

Just my two cents, but with these circular orbits, I find it easier to use svgOrigin and just animate the rotation. (Not that there's anything wrong with using a motion path.) Here's a quick fork for you. You'd need to adjust the rotations to meet your needs, but it shows how you could do it without a motion path. https://codepen.io/PointC/pen/04c10b7a70911c7a16ccba3cdaf9587d Happy tweening.

🤔 Well, I'm also not sure what the desired outcome is here. But since you are moving things in a 3-dimensional space and using the PerspectiveCamera here, there is no need to 'apply' a parallax effect in any special way between different 3D elements - it is already there. If you'd want it to feel parallax(ish) in relation to the background, I guess you'd just have to make sure that your elements move faster than the background does. In the end what exactly you want to achieve comes down to camera positioning and movement of either the elements or the camera ( one might

Hi @minhcd, GSAP can definitely animate canvas. And it looks like that Marx site is using GSAP is some way shape or form. Here's a super simple example on animating canvas with gsap: https://codepen.io/elegantseagulls/pen/gObyOwQ?editors=0010 If your diving into the WebGL world, the concept is basically the same: either create an object, or use known property values/variables that gsap can access. PixiJS plugin example: https://codepen.io/elegantseagulls/pen/qBEwjPV?editors=0010 Custom GSAP animated shader with ThreeJS shapes: https://codepe

The opposite direction maybe? Coming from random values and ended up at predefined values? This is how I'd do it - https://codepen.io/GreenSock/pen/YzZrEPV note, I've updated to new GSAP3 syntax and changed the CDN link too.

I took a slightly different approach. I created a timeline for each circle. (I removed the groups as they aren't really necessary here). This way you can copy/paste in more circles and the animation will adjust accordingly. The secret with the scale tween is just the same as @elegantseagulls did. Make the duration half of the orbit and use a yoyo tween. https://codepen.io/PointC/pen/xxqrqby Hopefully that helps. Obviously you can adjust durations and eases to your liking. Happy tweening.

Hi @rcneil, You can just add another tween to take care of scaleing. Something like: gsap.to("#graphic-1", { duration:5, repeat: -1, ease: "none", scale: .2, yoyo: true, }); would do the trick. Looking at your animation, though here's a few things that could help simplify: 1: Combine the graphics into a single tween and loop/offset them with stagger 2: Comnbine motionPath and scale tweens into a single timeline Check it here: https://codepen.io/ryan_labar/pen/rNywmLX?editors=0010

Craig is the ultimate SVG wizard. 🙌

Bingo. Here's a comparison of a simple path drawing. The clone has some random chunks removed and you can see the difference in the animation and length. https://codepen.io/PointC/pen/4a697e4fd4b04f4876f0d2e2ef1c87bf The same problem is present if you don't use DrawSVG and simply animate them with the CSS path length = 1 trick. https://codepen.io/PointC/pen/8d6932ae660d589790602f11e345eaa8 I don't really know if there's something Jack can add to DrawSVG for this or not. I usually just leave the artwork in pieces and group it to avoid this issue. Yo

I would probably skip the forEach function and do it like this - https://codepen.io/cassie-codes/pen/a0d4b82b993eb83cf8cbec32325ef7f5 But you could also apply a delay or position parameter based on the index value of the loop https://codepen.io/cassie-codes/pen/fbd45d7822bf94cb99f9a31d002d2e15

Glad to see you are enjoying "the fabulous" creative coding club. Not sure how you want to dynamically change the svg artwork but the problem with using an id is that your id is a number. a CSS id can not start with a number or just be a number. try something like circle.setAttribute("id", "circle" + counter++) For changing the colors there are plenty of options. I like stepping through the hsl() hue values to get a nice rainbow effect https://codepen.io/snorkltv/pen/dyvNLpX?editors=1010 using gsap.utils.wrap() you can also s

You can set the global timeScale. gsap.globalTimeline.timeScale(0.5); // plays everything at half speed Seems like it should be super easy. Just export your variables from a single file. variables.js const debugMultiplier = 0.5; ... export { debugMultiplier }; foo.js import { debugMultiplier } from "./variables.js"; gsap.to("div", { x: 100, duration: 1 * debugMultiplier });

thanks for the tip in the article. looks like 2 scrolltriggers is the way to go. your demo is great and I'm sure it would help. there is already this demo below which covers a lot of ground but as such it's also quite wordy and a lot of stuff happens outside the viewport https://codepen.io/GreenSock/pen/LYVKWGo I love the simplicity and clarity of your demo, especially since you can see the events fire exactly when the markers intersect on the way up and down. 👍 the only change I'd suggest is to space the scroller-start and scrol

thx, it looks like I wasn't following you perfectly there. however, I think there is some confusion about when onEnterBack happens. I modified your demo to only include one section. I added a little callback that changes the background color of the page when onEnterBack happens. https://codepen.io/snorkltv/pen/XWMpXyd?editors=0010 Scroll up and down all the way. You will see that the animation does not reset when onEnterBack fires. It only resets onLeaveBack (4th toggle action) as you have it set that way. //onEnter, onLeave, onEnterBack,

I think you might have to calculate the aspect ratio yourself, and on every resize. Just a simple demonstration showing how to mimic the behavior of svg. So you can play around with the aspectType, alignX, and alignY variables. https://codepen.io/osublake/pen/3fdc4c75dbc38e9cfc06c7723588e79d Instead of messing with the background, I think it's easier to just draw your frames on a canvas element. That way you can treat the canvas element just like an image. https://codepen.io/osublake/pen/fad36ed2ac8608de7070e1caa1055461

The problem here is you can interrupt the tween at any time and then start a new tween to 360 with a duration of 3 seconds. So if the current animation is at 330 degrees and you interrupt it with a click, it will then animate the final 30 degrees in 3 seconds making it seem like slow motion. In this case I think using a .fromTo() tween would be the easiest fix. https://codepen.io/PointC/pen/6ef0faf495c9000cf1f553f5f7bbb773 You can also create your tweens/timelines outside of your event handler and simply play/reverse/pause etc. them with your clicks. Hopeful

You just have a typo. The defs is closed as </def> on line 8 in the html instead of </defs>. Since that wasn't closed correctly, everything was in the defs and therefore not rendered. Make that switch and you'll be good to go. Happy tweening.

trigger: "scroll-plane" isn't actually referring to anything because you've missed the class '.' out. Even if that was working - your scrollbar and sections have different start and end points, so they wouldn't be synced up. I've refactored it for you with some markers added so you can see what's happening. I've also popped the sections code into a loop so you don't have to write it out four times! https://codepen.io/cassie-codes/pen/91d8107ae1156ec61c2c1854a2e1efa4

Hi there - we don't recommend using scrollmagic. We have our own scroll plugin - ScrollTrigger, it's better in pretty much every way and (obviously) works better with GSAP. Secondly, tweenMax is an old version of GSAP, so I'd recommend you use GSAP 3 instead. You can target the offset of the stroke directly with GSAP, you'll need to look into how SVG line animation works in order to acheive that. It won't be as easy or flexible as DrawSVG though. Good luck!

You'd need to make one small change: //switch this skewX: gsap.utils.random(-20, 20), //to one of these skewX: gsap.utils.random(-20, 20, true) skewX: "random(-20, 20)" Happy tweening.

I assume you're talking about the logo animation. If you inspect it, it's just two SVGs stacked on top of each other with parts of each being animated and cross-faded. No need for Morph of Flip or anything extra for that.

Hey @cheestudio There actually was a problem with delays on ScrollTriggered animations in 3.6.1 (which you are using here). It was resolved for the next upcoming version which is supposed to be released within the next week or two if I am not mistaken. I threw in the beta files into your example it looks like it's working like a charm with those. https://codepen.io/akapowl/pen/88b32db966dabe47341257d3fd6e88d3

Hello and welcome to the forums @AkhilRaja. Since you are not actually scrolling horizontally but only just faking horizontal scroll-behaviour with a tween on vertical scroll, you can not use the horizontal property of ScrollTrigger and have to calculate the start and end yourself. Here is the demo from the demos-section showcasing that https://codepen.io/GreenSock/pen/ZEpNLZa Here you'll find a more detailed explanation about why it is neccessary to include an offset in your calculations And here is what

Yeah, there's definitely a much cleaner way to do this I tried to leave as much of your code alone as I could but here are the key changes: Added a "rotation" property to your Text object which basically controls the angle at which it starts. Now we can simply animate that "rotation" value and in an onUpdate, we do the clearRect() and then render() the text. The key with this kind of stuff is to focus on just getting an animation going FIRST, then once that's done, hook it up to the scroll. To get the easing effect, I set scrub: 1. You can tweak that number to

I'm not seeing the issue, but I'd bet it's just because the image hasn't loaded yet, thus the height is 0 at that point. That also explains why it would be intermittent - it depends how fast the image loads. Sometimes it may be there by the time the JS runs, sometimes not. My recommendation would be to set a specific height if you can *OR* just wait until everything loads before executing your animations 🎉

PixiJS makes using displacement filters really pretty easy: https://codepen.io/elegantseagulls/pen/dwEQJY?editors=0010

Yeah, you need to be very careful because there are a lot of factors: Startup spike - when a page loads, the browser has to spend a LOT of resources on various things like layout, rendering, rasterizing, layerizing, executing the JS and looking for the best ways to optimize it (identifying "hot" functions), etc. So if, for example, you run some transform animations for 500ms on initial load, for example, it may artificially seem like it's a slow device because the browser is so busy doing all those other tasks, but those will settle down shortly and the JS/animations may run buttery smo

Someone else may be able to better explain why setting the duration of the timeline doesn't work well, but usually for things like this I add a dummy tween: https://codesandbox.io/s/gsap-scrolll-forked-37lbi?file=/src/App.js Side note: you don't needs quotes around the scale value.

Hey @max_knrd You forgot to include the .scrollerProxy() - which is sort of the middle-man between locomotive-scroll and ScrollTrigger. Without that, ScrollTrigger will have no idea about the 'scroll-position' of locomotive-scroll because it doesn't use a native scrolling-technique but translates the content up and down instead. That is also why locomotive-scroll's data-scroll-section won't work with ScrollTrigger - when you use that data-attribute on individual sections, those individual sections will get translated up and down individually but ScrollTrigger needs some

Hi and welcome to the GreenSock forums, It sounds like you are running your javascript BEFORE the DOM is accessible. Either put your tween code inside the jQuery document ready OR just make sure your script is right before the closing </body> tag. <script> gsap.to(".cont", { // selector text, Array, or object x: 100, // any properties (not limited to CSS) backgroundColor: "red", // camelCase duration: 1, // seconds }); </script> </body> or if you code is in that external file, load it right before the closing body (not in

Sounds like you're looking for the .getProperty() method. https://greensock.com/docs/v3/GSAP/gsap.getProperty Happy tweening.

Hi and welcome to the GreenSock forums, This demo here shows how to get pretty close to that effect. https://codepen.io/snorkltv/pen/bGqrJGN Be sure to read the docs on SplitText and staggers. If you have trouble understanding the docs, everything happening in this demo is covered in my free GSAP 3 beginner's course (see signature).

Hey, I'm the author of ASScroll so just thought I'd chime in here Just for clarification - the iframe issue is that once your mouse enters an iframe, the `wheel` event on the parent window stops firing since it's not linked to any sort of overscroll behaviour. It won't fire until your mouse leaves the iframe again, which is problematic especially on trackpads since the mouse will sort of stay in the same position as you try and continue to scroll past with two fingers. The reason ASScroll works in those edge cases like when hovering over an iframe or using the middle m

Additionally there's no need to add css objects - gsap.to(buttonText, 0.25, { css: { opacity: 1 } }); // can be gsap.to(buttonText, 0.25, { opacity: 1 }); and gsap.to(button, 0.5, { css: { transform: `translate(-50%, -50%) scale(0.75)` } }); // can be gsap.to(button, 0.5, { yPercent: -50, xPercent: -50, scale: 0.75, });

lol i just remembered I had a video on tapping into eases as functions. doh!

Hello there, excuse me for crushing in like that, but I was giving this a shot myself. Here is a working sort of minimal demo of what I think it is you wanted to achieve @Nikolay Sabev, where the actual scroll-behaviour is horizontal and the fake-horizontal scroll from the example you posted is exchanged with a fake-vertical scroll. https://codepen.io/akapowl/pen/87ad10833ca73c5a1ea59190fae48e32 I initially had the same problem with the content moving diagonally until I figured you'd have to set overflow-y: hidden to the [data-scroll-container] - I ad

From the docs - Setting repeatRefresh: true causes a repeating tween to invalidate() and re-record its starting/ending values internally on each full iteration (not including yoyo's). This is useful when you use dynamic values (relative, random, or function-based). For example, x: "random(-100, 100)" would get a new random x value on each repeat. duration, delay, and stagger do NOT refresh. So the above solution is probably the way to go! 🙌

Heya! You could create a new tween on hover? Currently your tween's created once per circle at run time and is unaffected when the button value changes https://codepen.io/cassie-codes/pen/6cf2b426ed992aa8c24236590f386a1d?editors=0110

I've simplified the SVG code down a lot for this example. https://codepen.io/cassie-codes/pen/9377f4b5f834a4785ae8de143f6a98c8 The pink rectangle is just there for demo purposes to show you how the mask is working - that shape is duplicated in the mask element. I'm using <use> to position and reuse the video element. With SVG stuff a lot of the work is in setting the SVG up nicely - it really helps if you have a readable base to work with!

Maybe we could add something like this to the docs? I see a decent bit of confusion around when these events happen *cough* definitely not me, I'm not confused at all https://codepen.io/GreenSock/pen/qBrRaeX

Hey @zlobul, I think an easing tweak/custom ease could/would help with that maybe try 'sine.inOut', or create your own custom ease: https://greensock.com/docs/v3/Eases Also, we highly recommend upgrading to GSAP v3 -- It has a much smaller file size more features, and an easier to use syntax ( .

Alternately - you could use masking and SVG paths for the fluid part. Here's a liquid morphing demo - (a lot of it is in the setup) @PointC has a great article here if you want to dig in. https://codepen.io/osublake/pen/BYwgBg And a much simpler liquid mask without morphing https://codepen.io/cassie-codes/pen/RwRORqB?default-tab=result&theme-id=18940

welcome to the forums, thanks for the demo, it's a great start. I added a spacer on top and bottom of the page so that all elements could scroll in and out of the viewport fully. https://codepen.io/snorkltv/pen/VwpPevm?editors=1010 it appears each section behaves the same way. I don't see the third section acting any differently. your onLeaveBack is set to reset and that appears to be working correctly. the animations resets to a progress(0) where everything has opacity:0 when the start position moves down past scroller-start. Your on