Leaderboard

Hey @Love Kumar, Is it what you expect ??? https://codepen.io/mikeK/pen/oNxrzaz?editors=1010 Happy rotating ... Mikel

Hey @RaoulUnger You are actually making one of the most common ScrollTrigger mistakes. You are targeting all elements with the class of .section. Since you want each of the elements to be triggered at its own given time, you should loop over them, to give them distinct directions. Here's how you could set it up with GSAP's .utils.toArray() https://codepen.io/akapowl/pen/bGegErw Hope this helps. Cheers, Paul

Heya! Remember I said I was working on a Svelte project that would be needing some GSAP? Here are some of the barebones examples I made using GSAP and Svelte. onMount: https://svelte.dev/repl/94885eb0f90045da934ed5fd9f7fdb2a?version=3.29.0 Transition directive: https://svelte.dev/repl/1f70e16d637945fa8788fafafb481454?version=3.29.0 In/Out directives: https://svelte.dev/repl/000b2f192c204cd799dbb4f6d70a1c21?version=3.29.0 Action directive: https://svelte.dev/repl/eb2f99e9f3324e25af4eaada0389eed6?version=3.29.0 Animation directive: (TO-DO soon).

You could try setting your autoRotate to something like 25°. autoRotate: 25, You do have some sharp turns in there so it will still be a bit jumpy. That info is still accurate. You'll want to use a mask to animate a dashed path. I have a whole tutorial about the technique on my training blog. https://www.motiontricks.com/svg-dashed-line-animation/ Hopefully that helps. Happy tweening.

Hey @Varunbht, As mentioned in this thread To compensate for the 'faster' vertical movement, a logic could be defined that counteracts the position of the SVG. Here is a simple experiment adapted to certain sectors (a fixed width of the SVG!). Here quick modification of your case https://codepen.io/mikeK/pen/eYzJrQJ Happy scrolling ... Mikel

Hey @pattwala - welcome to the forums You could set the tl to paused at initiation, and at the end of the animateText-function tell the tl to play from where you'd like, like maybe so tl.play(35) https://codepen.io/akapowl/pen/yLJLMEP Does this meet your expectations? Cheers, Paul

For the record, nobody [that I know of] here is "anti-Lottie". In fact, I've seen some very slick animations done with it, many of which were used along with GSAP. There are definitely effects that are only feasible with a tool like After Effects. As with all tools there are pros and cons to weigh. And to Blake's comment about sometimes video being better, I think that's entirely true when the artwork is very complex (SVGs can be rough on the browser rendering-wise because it must fabricate every pixel dynamically on each tick whereas video codecs can be much easier to decode and

Looks like you're off to a good start. You can do movieclips. For scene management, you can group everything inside a container. When a scene isn't in use, remove the scene container from the stage so it doesn't get rendered. If memory becomes an issue, you should probably destroy all the display objects in that container when the scene isn't active. Just animate whatever properties you want. const dropShadow = new PIXI.filters.DropShadowFilter(); mySprite.filters = [dropShadow]; gsap.to(dropShadow, { rotation: 100, blur:

Hey @Hugo Priet This thread is more or less a journey to roughly the effect, that you intend (my last two answers in there might be of interest for you) I later on worked up a polished up version of that. And now after flying over this thread and seeing your initial example on that website, I added an inverted version of the image ScrollTrigger(s) to it. Animation-wise, I am basically just tweening on the height of the elements that have background-images set via CSS. Maybe this can serve as inspiration to you (if you c

Hi @gotofig2, This is just a matter of your selector specificity ... along with scope within the callback. https://codepen.io/sgorneau/pen/GRZaRqJ Using .nav-item as your selector for onmouseenter/leave and $(this), you can target the hovered element. Also, event.currentTarget is pure Javascript (not specific to jQuery), but I'm not sure if you were implying that it was a jQuery thing. -- Some other notes ... putting a scale or autoAlpha of 0 on something will put it out of reach of a hover/mouseenter event (and event.targ

So I took a quick and dirty stab at this as a fun personal challenge on a Monday evening. What better way to get the creative juices flowing for the week 👍🏼 https://codepen.io/sgorneau/pen/yLOrqrQ Also .. the effect is better in a bigger view codepen.io/sgorneau/full/yLOrqrQ Better with a Matrixy font https://codepen.io/sgorneau/pen/oNxOJjL I also realize this is not the effect OP was getting at ... Zach's recommendation of scramble text is perfect for what OP is looking for (which is reminiscent of the phone number digit matchin

Additionally to what mikel said, you could get even more fancy and do it all in a "single tween" using GSAP's keyframes functionality if you wanted to: https://codepen.io/GreenSock/pen/PozpEgP?editors=0010

Hey @bramroos, Welcome to the GreenSock Forum. You could use repeat-1 and defaults Anything in the defaults object of a timeline gets inherited by its child animations when they get created, so if you find yourself setting the same ease or duration (or any value) over and over again, this can help make your code more concise. https://codepen.io/mikeK/pen/rNLypdY?editors=1010 Happy morphing ... Mikel

Here's a SpriteSheet helper function I whipped together to accommodate more complex situations like this. You'll need to load/format the data to match what I did (or edit my function), but hopefully it at least gets you moving in the right direction (I slapped some labels on the frames of the first two sheets): https://codepen.io/GreenSock/pen/4299f8616fdf0f87df155c9624bd2604?editors=0010 function SpriteSheet(container, data, onLoad) { container = gsap.utils.toArray(container)[0]; let progress = 0, frames = 0, lookup = [], loading = [], loadingQueue = e => loading

If you just want to disable the refresh() calls that automatically get triggered by various events, you can do so like this: ScrollTrigger.config({ // default is "resize,visibilitychange,DOMContentLoaded,load" so we can remove "resize" from the list: autoRefreshEvents: "visibilitychange,DOMContentLoaded,load" }); Does that help?

Hey @Dennyno It looks like you don't have a 'contenitore_parallax' in your HTML. What you have, is a 'contenitore-parallax' though. Looks like you might have simply made a typo. If correcting it doesn't resolve your issue, please provide a minimal demo of the issue you are experiencing. Hope this helps - and welcome to the forums Cheers, Paul

Hey @Sanprieto - welcome to the forums. There is .time() Is this what you're looking for? https://codepen.io/akapowl/pen/vYKyBrW

Hey @Huanyee You can actually achieve this with just one loop for each .title-bg - you just need to fit everything neccessary inside that loop. In this following pen, I reverted the basic setup of the animation back to the initial example. The only thing, that actually needed to be changed on the timeline, was to take the initial .set on the chars out of the timeline, and instead, set it up beforehand, because you don't want it to be part of the animation, but the initial state. https://codepen.io/akapowl/pen/YzWGBJY Hope this

Very interesting - this was caused by tiny math issues related to binary systems: start: 2.8 / 5, // (0.5599999999999999) end: 2.8 / 5 + 1, // (1.56) Thus those values were interpreted as slightly more than one iteration around. That should be resolved in the next release which you can preview at https://assets.codepen.io/16327/MotionPathPlugin.min.js Here's how I'd probably do it (I'm not a fan of the instant/jarring change in direction): https://codepen.io/GreenSock/pen/5b5b47f9fe28ff287db07274154199dd?editors=0010 Does that help?

Hey @_youri You could wrap your funtionality in a function and change your box to the event-target function mouseMove(e) { var xPos = (event.clientX/$(window).width())-0.5, yPos = (event.clientY/$(window).height())-0.5, //box = $('.box'), box = e.target; coord = $('.coordinates') ... and then instead of applying that function to mousemove on the document, you could apply it on mouseenter of the .box and remove it again on mouseleave. $('.box').on('mouseenter', function() { $('.box').on('mousemove', mouseMo

Hey @zloycoder - welcome to the forums. My first piece of advice on this would be to not use ScrollMagic, but GSAP's own ScrollTrigger plugin. It is just so much more capable than ScrollMagic in every imaginable scenario. There have been several questions about the effects on that page. I'll link some for you, hoping, that I got correctly, which effects you were referring to. 1) Rolling Text 2) Image Change Hope this helps. Cheers, Paul

Hey @Tigranchik That is mainly related to using a fromTo-tween on your $('.expertise:lt(4)') so that third tween-instance in your timeline, that overwrites the values on your first tween when set up. Just changing it to a .to tween already did the trick for me. But also, I'd highly recommend migrating your code to the new syntax. Here is a working example of what things could look like: https://codepen.io/akapowl/pen/PozzQaV Edit: What you could also do (if you wanted to kee

There are various logic issues in your CodePen and I think a whole different approach would be better/cleaner: https://codepen.io/GreenSock/pen/1044f52f08bee3c40af523ba72dcd2af?editors=0010 Is that more like what you were looking for?

Hi and welcome to the GreenSock forums. Why are you using GSAP ticker for something that can be solved quite easily without it? Take a look at this thread and you'll find a bunch of solutions from some of the superstars in these forums: Honestly I would use some of their code with a direct GSAP instance and leave the ticker alone. Finally I would also avoid updating state on every mouse movement because that basically causes a re-render, which of course, in simple components means nothing, but in more complex ones could be a performance issue.

It looks like you just accidentally nested the "ease" inside the motionPath:{} object. // BAD: .to(... { motionPath: { ease: "none", ... } }); // GOOD: .to(... { ease: "none", motionPath: { ... } }); Does that help?

The reason it "gets crazy" (keeps going fast at the end) is just because that's what the velocity is at the end of the scroll (fast). It doesn't keep updating the velocity after that (onUpdate only gets called when the actual scroll position changes). So it's behaving as expected. I'm not sure what behavior you want exactly, but if you want the rotation to return to its "normal" speed after scrolling, you could do something like this: https://codepen.io/GreenSock/pen/fb6d6dc923b36facb2020f4da7ef63ef?editors=0010 I'm just setting the timeScale based on velocity li

It's not because of the rotation. It's because you switched the .to() to a .from() so when you set the progress to 0 (which is the from position) then effectively call another .from() animation the end values and start values are the same. So it looks like nothing is happening. If you're going to use a .from() with this method you should set the progress to 1 instead on resize. Something like this: https://codepen.io/GreenSock/pen/VwjjZZM?editors=0010

Or just use the vanilla JS version of changing classes instead But if you want to do something when the animation completes, you should use the onComplete callback. A more full demo of what you're trying to do would allow us to help you more clearly.

Hey @callmegoon I think it is only just 'target', but if you want to make use of it with jquery-functions later, you'd have to wrap it accordingly, like so var element = $(target); https://codepen.io/akapowl/pen/RwRaXKK Is this, what you're after? Hope it helps. Cheers, Paul

I don't know about your exact setup, but just as an example, what things could look like I made this quick pen (before I saw, that things already work great on your side ) https://codepen.io/akapowl/pen/RwRaKGw

Have you tried setting overflow: hidden on your body and/or whatever element you apply your scroll to? If that don't work, you could try setting 'overflow: hidden !important' to .smooth-scroll. That did the trick for me in one example.

Hey @alecosta Since you are not using the browser built-in horizontal scrolling, but only 'faking' a horizontal scroll by translating the content on the x-axis, the 'horizontal: true' in combination with your start on that second ScrollTrigger you have, won't work. You'll have to use a 'normal' vertical set up ScrollTrigger, and calculate the start for your tween dependent on the scroll-progress on the y-axis. I did it like so - just for example - in the following pen gsap.to("#three", { scrollTrigger: { trigger: "body", // elemento ogge

It's actually a very intentional thing that we round in that way and I actually can't remember anyone requesting more than 4 decimal places, but it is entirely possible with a simple [custom] plugin: https://codepen.io/GreenSock/pen/3f6f2d2624421d678c02a1a882c73aff?editors=0010 Here's the "precise" plugin: gsap.registerPlugin({ name: "precise", init(target, vars, tween, index, targets) { let data = this, p, value; data.t = target; for (p in vars) { value = vars[p]; typeof(value) === "function" && (value = value.call(tween, index, target, targets)

Hey @oligsap You are not giving ScrollTrigger any hint on the x-position-value to use, that you need for horizontal-scrolling. ScrollTrigger.scrollerProxy(scrollbar, { scrollTop(value) { if (arguments.length) { myHorizontalScrollbar.scrollTop = value; } return myHorizontalScrollbar.scrollTop; }, scrollLeft(value) { if (arguments.length) { myHorizontalScrollbar.scrollLeft = value; } return myHorizontalScrollbar.scrollLeft; } }); I added the neccessary scrollLeft part to your scrollerProxy and it works. In t

I noticed a few problems: You only created one timeline initially, and then you called play() on it each time a user clicked, but I think maybe you meant restart()? Remember, play() just makes the playhead go forward but after it plays all the way through, the playhead is at the END and it can't go forward past the end so play() won't really do anything. I assume you're planning to have multiple cards at some point, right? If so, you'll of course need a separate animation for each one, so you should really put your animation-creation inside your forEach() loop so that it's scope

If you're talking about the individual characters in that span, you can do something like this. tl.to(".highlight div", {...}) Does that help? Happy tweening.

Hey violet. Actually if you look at the transforms that are rendered you can see that both the scale and the translation are being applied. It just doesn't look like the translation is happening when both are applied. This is because of the order of operations in which transforms happen paired with the transform origin that you're using. By default the transform-origin of every element is "50% 50%" or "center center" (the same thing). Every render the first thing that happens is that your element gets scaled down. Then the translation happens. But there's enough transl

Hey @redink - welcome to the forums Edit for correction: What I wrote before was actually not entirely true. One Problem you are having, is that your click-function adresses every element with the class of .card-container, when it actually should only be adressing this one that is being clicked on - so you change the neccessary variable for one element whenever clicking another. I changed the logic for your click-function to this var forward = false; $(this).click(function() { if(forward) {

Hey @oligsap No need to apologize. Just to make sure: I was not intending to point a finger at someone. Most people (including myself) do not even realize when they make mistakes regarding ScrollTrigger. I just wanted you to know, that this very helpful page exists - it's always a good starting point to check, when things do not work as expected with ScrollTrigger. Happy Scrolling

I went ahead and generated the boxes dynamically based on some parameters to test to make sure it worked with a dynamic amount of elements. But the core of what you're asking just relates to the two tweens at the end of the setupBoxes function: https://codepen.io/GreenSock/pen/GRqKYGO?editors=0010

I'd probably just use a CSS variable https://codepen.io/PointC/pen/24250ac7c726234b41def59c70823d9d

Hey @oligsap, Welcome to the GreenSock Forum. I am not sure what exactly you want to achieve. Here an option https://codepen.io/mikeK/pen/ExyYaye?editors=1010 Happy tweening ... Mikel

Hi and welcome to the GreenSock forums. I wouldn't expect it to work because as far as I can tell, the main use() method in Vue is reserved for Vue specific plugins like VueX, Vue Router, etc. While GSAP will work with Vue without any issues, you'll have to import it in every component you use it, like you mentioned. Here is the API docs about Vue.use(): https://vuejs.org/v2/api/#Vue-use Happy Tweening!!!

Hey Zach, Thanks. https://codepen.io/mikeK/pen/XWdwxRN

Hey @Hargy - welcome to the forums. You would have to set up the splitText inside of that forEach-function you have for your var headSelectors=document.querySelectorAll("section.white"); so the animation only adresses the text in that one section it is supposed to adress each time. I set it up like this // Split Text Triggers var headSelectors = document.querySelectorAll("section.white"); headSelectors.forEach((header, index) => { // Split Text const splitThis = header.querySelector(".slide-content"); const sp

This is actually a great illustration of why DrawSVGPlugin is valuable. A lot of people think they can get the same effect by manually animating the strokeDashoffset which is technically true in many cases, but there are quite a few tricky things that the plugin solves for you and you just stumbled on one of them. Specifically, I noticed: You set the attribute with your function, but then you animated the CSS property. Be very careful because that ends up with there being two completely different values and some browsers prioritize CSS, and others may prioritize the attribute. In other

I quite like that effect from the site you showed: https://www.ecwid.com/?fbclid=IwAR2ygAek1LtYvPiQbq2x8P9vOfmzGO4zKM8sQRNVySt29cSApJB2O71JtaY So I figured it was a good excuse to practice my ScrollTrigger and transform skills. Kind of finicky working out the css, there's a few different ways you coudl approach that. This seems to work pretty well. https://codepen.io/Visual-Q/pen/RwadBgG

Hey @ToxifiedM - welcome to the forums. In your case, ScrollTrigger is not working, because you also have to define ".root" as its scroller. ... scrollTrigger: { scrub: true, scroller: ".root" } ... https://codepen.io/akapowl/pen/QWNoXLM

Well, if you're using the context API, any component down the tree can consume that and use the regular GSAP methods to start that particular timeline. Keep in mind that you'll be passing a reference of the timeline, so it shouldn't mean any major memory consumption. Now normally when I'm facing a situation like that I use redux since is more intended for such things, meaning you can update a state property in the store and trigger the timeline to be played based on that specific update, which can be followed with a useEffect hook. One thing that has to be handed to the hooks API i

Hey @Narendra Verma, Is this an option for your for your intention? https://codepen.io/mikeK/pen/dyMrZzG?editors=0110 Happy tweening ... Mikel