Leaderboard

Hey, A little experiment on how ScrollTrigger and snap could be used. Just for info. Happy tweening ... Mikel

Hey, I created a simple example based on this CodePen from the GreenSock collection (I assume that this is what you're after). Now for some reason in Codesandbox this didn't worked so I had to create a repo and publish the sample in the corresponding GitHub page. This is the repo url: https://github.com/rhernandog/gsap-flip-react Here is the meat of the code: https://github.com/rhernandog/gsap-flip-react/blob/master/src/App.js Here is the live sample: https://rhernandog.github.io/gsap-flip-react/ Based on your initial post in the thread

Hey @sorciereus, You could also use gsap.utils.shuffle() and stagger methods - and a motionPath and ... https://codepen.io/mikeK/pen/PobOwjN Happy landing ... Mikel

Hey @mr-parrott Would something like this work for you? window.addEventListener("load", () => { function createNew() { let tl = gsap.timeline(); tl.eventCallback("onComplete", createNew); new Anim(tl); console.log(tl) } createNew(); }); https://codepen.io/akapowl/pen/69280b40e98c9947a89e48fe6587563d

These staggers that happen near to each other time-wise are a job for ScrollTrigger.batch It essentially triggers them in close proximity to each other. You can read up on the method in the docs. It is quite extensive and thorough. https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.batch() Additionally, you can also add back onLeave and onEnterBack as in the docs, if you want to re-trigger the first batch as well. https://codepen.io/dadacoded/pen/94b47a1c756f829787ed27e177cd0b36

Hi shozo, https://codepen.io/AngeloKeirsebilck/pen/YzpZqQM I would do it like this, not sure if this meets your requirements? As I made three separate grids now. But it surely works like this.

I'm not quite sure which three you mean, but here's a basic example of using a label and starting three tweens at the same time. https://codepen.io/PointC/pen/063602d13b661983d59411b5660d08a8 Does that help?

The question reminds me of my old 2,000 post demo. It's still in GSAP 2 syntax, but maybe it'll give you some ideas. https://codepen.io/PointC/pen/RyaJmj

There would be a few ways to make it happen. An easy choice would be to loop through your words array and animate two at a time like this. https://codepen.io/PointC/pen/jOVEade Hopefully that helps. Happy tweening.

Hey @sorciereus There are some issues in your code; e.g. you get an eror thrown in your console - always a good starting point to debug things. There's a comma missing after the duration in your tween. Also you are missing the hash for the id you want to address when creating the SplitText - and new SplitText1(...) is not a thing as far as I know. var mySplitText1 = new SplitText1("txt1", { ... // not good var mySplitText1 = new SplitText("#txt1", { ... // better I changed those, increased the duration and x-value of the tween and added a de

var colors = ["#f38630","#6fb936", "#ccc", "#6fb936"]; //initially colorize each box and position in a row function setup() { gsap.killTweensOf('.box'); gsap.set(".box", { backgroundColor: (i) => colors[i % colors.length], x: (i) => i * window.innerWidth / 4 }); gsap.to(".box", { duration: 40, ease: "none", x: `+=${2 * window.innerWidth}`, //move each box 500px to right modifiers: { x: gsap.utils.unitize(x => parseFloat(x) % (2 * window.innerWidth)) //force x value to be between 0 and 500 using modulus }, repeat: -1 }); } setup() window.addEventListener(

Yeah, it's totally fine if you want to start a discussion here in the forums, but we'll just be very clear about it being out of scope so you may not see "answers" from the admins/moderators. With GSAP-related questions/topics, we feel an obligation to do whatever we can to deliver an answer but we have limited time/resources so we can't spread ourselves too thin by encouraging or participating in extra-curricular discussions, that's all. We spend an inordinate amount of time answering people's questions here for free while also trying to tend to other duties so I hope you don't take it person

Just change your trigger and you are good to go. Also you will need some height/spacer at the end because you will not be able to reach the last trigger. trigger: item

secAbtTl .from( ".sec-about-presentation h1", { // yPercent: 100, opacity: 0, stagger: 0.1 }, "<0.5" ) "<0.5" This adds 0.5 delay at the start of the tween.

Hi, You can create a live editable sample of an app bundled with Parcel in codesandbox. Just create a VanillaJS sandbox, I believe that by default those projects actually use Parcel to bundle the app. All you have to do then is just install all the dependencies you need. https://codesandbox.io/ Happy Tweening!!!

Hey @Lichay, Do you expect such a 'timing'? https://codepen.io/mikeK/pen/mdOWomE?editors=0010 Here another example: different durations and positions https://codepen.io/mikeK/pen/qBqrgLL Happy tweening ... Mikel

Hey, @mikel showed you a really nice way to do this. Key things to note: you will need two identical paths in your svg. The newly drawn ones need to be set to hidden and drawSVG: 0 before the start of the animation. Alternatively you can use tween.from() which sets the animation in such a way that the values you enter become the initial values and the animation proceeds to the values in your css/html. https://codepen.io/dadacoded/pen/b1f0f163afe3340ac0ba930f5894d21a?editors=1010

Sure, something like this?: https://codepen.io/GreenSock/pen/43ff6412b2e9f950c66d356e38e572d3?editors=0010

It looks like GSAP is doing exactly what it's supposed to. Notice that your element has a transform applied to it already: transform="translate(0 75.828)" So that means its "y" is starting at 75.828, so when you animate it to -1, it's moving it a total of 76.828 units up. Did you want to only move it 1 pixel up from wherever it currently is? If so, just use a relative value by adding a "-=" or "+=" prefix: gsap.to('#barraBot',{y:"-=1" , duration: 3}) So in this case, that'll take the current value (75.828) and subtract 1 from it, and use that as the end value of th

Hey tailbreezy. First off, you're making one of the most common GSAP mistakes: not setting all of your transforms with GSAP on elements that you're affecting with GSAP. Is this what you're wanting to do? https://codepen.io/GreenSock/pen/abBBeRq Side notes: Usually it's more common to use the same <svg> and then use <g>s to move things around as needed. Note how I included the clearProps between the .getState() and the .from(). Width should be automatically recorded by Flip, I'm surprised that removing the { props: "width"

Sure. @Carl made a nice demo showcasing this exact method. https://codepen.io/dadacoded/pen/a045c5d4c5592c20935539ae99be2b3e?editors=1010

Hey @heneu You could decrease the duration, adjust the amount to shift things to the right for the width of a single item, add a repeatDelay (which represents the time you want to wait) and add repeatRefresh: true to make sure, that when it repeats it will start from the last position instead of the start, and you should be good to go. Welcome to the forums https://codepen.io/akapowl/pen/7c06e8f26466232f9183e891114f0077

Welcome to the forums, @saritas. It looks like you're using the old syntax. I'd strongly recommend upgrading to the more concise, powerful and simple API in GSAP 3. You can just use repeatDelay to put a delay before the yoyo: let tl = gsap.timeline(); tl.to(obj1, {x: 100, duration: 1, repeat: 1, yoyo: true, repeatDelay: 2}) .to(obj2, {x: 100, duration: 1, repeat: 1, yoyo: true}, 1); Or you can just use 4 tweens instead of yoyoing 2 tweens. In other words, accomplish the yoyo effect with different tweens. Happy tweening

I don't see much wrong with this method, except for one thing: In the CSS there is a transition: all set on the .nav li a. This causes some stuttering on the links when you tween on them with GSAP because GSAP has to fight with the CSS transition, so this is something you would want to avoid. Except for that it works quite good, I would say. For the scroll-blocking: This is more of a general thing, but you can certainly do that with GSAP - and even pretty easily. What you want is to set overflow: hidden to your scroller element (the body here). You

I would say this is not just a sidenote, as @mvaneijgen said, but rather neccessary logic for it to properly work. In that first pen, he is creating an array of all boxes on the page, so every time a ScrollTrigger would be triggered, it would animate all boxes on the page, which would create logic-issues/conflicting tweens with the next time all boxes would be animated when hitting the next trigger. In the second pen he chose to only address the boxes inside the specific wrap, so only those will be animated on trigger. Since the triggers are set on each wrap there

I looked at it on my iPhone 12 Pro as well and didn't notice any unexpected problems. Please note that iOS Safari shows/hides browser chrome when you swipe up/down which literally changes the height of the page. ScrollTrigger can't magically solve that for you. In order to avoid a sudden stop in scrolling or jump, it defers the refresh until scrolling ends. You can, of course, force a refresh() if you prefer, but you'll have to accept the tradeoffs (loss of momentum scroll and potentially a jump). Also, I would really appreciate it if you would stop making accusations

Hey @habhab. If you want to loop something infinitely, you would want to use repeat: -1. To get rid of that jump, you'd want to make sure it doesn't repeat from the start, so you'd probably want to increase the rotation with each repeat by using "+=" instead of tweening to a certain rotation and use repeatRefresh: true to make sure it starts from where it ended. Then again, with how you pass the rotation, I figured it would change the amount of increase in rotation for an individual atom every other repeat https://codepen.io/akapowl/pen/1eef1c11a

Or how about gsap.from( ".main-content > *", { y: 100, ease: "Power2.easeInOut", opacity: 0, duration: 0.4, stagger: 0.3, } );

Welcome to the GreenSock forums @Muzammil hasan , you could do something like the following for instance. var target = document.querySelectorAll(".main-content")[0]; gsap.from(target.children, { y: 100, ease: "Power2.easeInOut", opacity: 0, duration: 0.4, stagger: 0.3, } ); Hopefully that helps your efforts.

Is your goal to have everything rotate around the center of the SVG? If so, svgOrigin is probably the easiest way to do it. https://codepen.io/GreenSock/pen/b9a523861af8c67036640810240c64fb?editors=0010 transformOrigin is always in relation to the element itself (not the SVG canvas), so "50% 50%" would be the middle of the element itself. And px-based values would be measured from the top left corner of the element itself. Does that help at all?

So, what is hindering you? Just do it, like on any other ScrollTrigger - only the end should be dependent on a certain width instead of height here. https://codepen.io/akapowl/pen/b8f05dee69dabe80357077e911121f16 I updated this pen to use x-translation here instead. There is no problem for me like it is in your demo. Remember when I said this following before? "The way you are positioning your box1 (with transforms applied) will likely throw things off when wanting to tween on transform-values with GSAP, so you should consider maybe p

There are many ways... Just use a regular delay (it's a special property): gsap.to(window, {duration: 0, scrollTo: from}) gsap.to(window, {delay: time, duration: speed, scrollTo: to}) Or use a timeline: let tl = gsap.timeline(); tl.to(window, {duration: 0, scrollTo: from}); .to(window, {duration: speed, scrollTo: to}, time); There are other ways too. Does that help?

In addition to what the others said: That page you linked to does use some sort of scrolljacking - something like fullpage.js does. This is not what ScrollTrigger is built to do in the first place. You can certainly achieve something like that with ScrollTrigger but you'd have to do most of the work (like handling eventlisteners and hijacking the all different possible scroll-events) yourself or choose to use a library like fullpage.js that does it for you.

It is working. You're scrubbing through it. If you scroll slow enough you can see that happening. If you scroll quickly then it will jump because that's what you're telling it to do. Maybe you'd like a numerical scrub like scrub: 0.5? Or perhaps you'd like to fire set enter and exist animations (i.e. don't use scrub, just use toggleActions. Or just use the callbacks and fire new tweens each time).

Hey @huytran - welcome to the forums. What you are experiencing is related to your path not being a single path stroke but forming an enclosed shape. You can see what I mean in the pen below if you change your fill to none, make the stroke a bit thicker and add a stroke-color. (I left it in the background for you to see what I mean) If you want it like in your pictures, you should make sure that your path is set up correctly. Something like this: https://codepen.io/akapowl/pen/820becb396cb470a2c317239fe474d2f E

Yep, exactly - we've actually got 3 levels of GSAP-ing; we've got the raw timeline which is the base which has "extra" animations because we want things to be "infinite", so we can't start the animation at the very beginning - there won't be any elements showing to the LEFT of that first element. So, for example, if we've got 5 elements to animate, it'd look like: 1-2-3-4-5-1-2-3-4-5-1 ^ start here The "overlap" is just the number of elements on each side of the start/end that we'll pad it with (so we'll add 2 * overlap number of extra animations). It really just depends how m

Hey Schweinedog. Thanks for supporting GreenSock with a Club GreenSock membership! A few notes: You don't need the new keyword when creating timelines. You might benefit from GSAP 3's defaults functionality. You might benefit from GSAP 3's random functionality (don't have to write your own). As for your question, since in this case you want a different random value for each repeat but not each target, I'd probably make use of the onRepeat callback along with some variables like so: https://codepen.io/GreenSock/pen/ExNYazp?editors=0010

Hi @Lichay, I'm not entirely sure what you're looking for but I'm thinking you just need a repeat, yoyo, and a repeatDelay: gsap.to(element, { y: 200, scale: 1.3, repeat: 1, yoyo: true, repeatDelay: 2, });

It isn't staying there for 1-2 seconds in your demo - it's an illusion caused by the fact that you're using a "power4.out" ease which makes it slow WAY down at the end. If you change that ease to "none", for example, you'll see the change in direction is immediate. To make it jump back to the very start of the animation once it completes, you can use an onComplete to basically "rewind" it like this: https://codepen.io/GreenSock/pen/43a85e285303a5e8f47ae9b9090f7ca2?editors=0010 There are actually a bunch of ways you could do it, but I don't want to overcomplicate

Is it working better now (after clearing your cache)? There was a very particular edge case that I needed to work around in DrawSVGPlugin, requiring one line of conditional logic that I put into the next release, and you can preview it now on CodePen with the usual URL: https://assets.codepen.io/16327/DrawSVGPlugin3.min.js

Hey @Shikha and welcome to the GreenSock forums. No, we do not offer our products for free. How could we make a living if we did that? We'd have to stop offering our services to people which would be worse for everyone who uses them as well as ourselves. As Shrug suggested, we highly recommend that you read about why we have the pricing model that we do. As for alternatives, you simply cannot find a free equivalent to GSAP and all of the plugins that GSAP offers. GSAP is the standard for web animation. When you use GSAP, especially with the Club GreenSock plugins, you c

There is endArray option when passing arrays. gsap.to(arr,{ duration: 2, endArray:[250, 250, 250, 250, 250, 250, 250, 250, 800, 800] }) https://codepen.io/dadacoded/pen/ac9bb546aae9d2c50d3182fa316abb4b?editors=1010

Hey @angelokeirsebilck I think this is sort of a tricky scenario and since I was interested myself, I gave it a shot. In a case like this it's usually best to wrap all of your content and pin this wrapping element instead, when you don't want the pinSpacing to take its effect of adding spacing for being able move the pinned items - since when you simply set pinSpacing to false, as you noticed, the content beneath that pinned element would scroll over it. This is where the trickiness kicks in, because on one hand you don't want pinSpacing to add space, but on

Looks like you have a .set() that would also need that label so the tiles will be visible. I've forked your demo and commented out everything except the .showerCabin and .tiles tweens. https://codepen.io/PointC/pen/037a036a597ca5f411c25a43c100cb8f Is that what you needed? PS Just FYI - You also have a conflict for the tiles[2] target on lines 24 & 25. you've asked those tweens to start at the same time but the tiles[2] target is moving to different x/y positions in each.

Hey @PG1, Just for FUN ... https://codepen.io/mikeK/pen/xxREJqR?editors=1010 Be creative ... Mikel

Hey @kalimschka Understanding, how the durations and position parameter work on ScrollTriggers with a scrub applied, you could achieve adding such a pause by either adding an empty tween to your timeline where you need it with the neccessary duration... https://codepen.io/akapowl/pen/3b469c518638934c3133c377a109c734 ...or you could right away just position things as needed with help of the position parameter. https://codepen.io/akapowl/pen/d6c235bf9e4def4be39b146e4ae4dfed

Hey @hintondesign You are still nesting ScrollTriggers inside multiple timeline tweens. It may work as you expect for now, but further down the road you might run into problems. Also; you don't need the immediateRender on every single tween, only on those, that contain elements on which you have tweened on the same values before. Here's how I would tackle it; creating an independent timeline for every section you have (and apply the scrollTrigger with a start of 'top top' and an end of '+=100%' to each of those timelines), using "<" in the po

Keep in mind that we didn't create this demo, @creativeocean did It's what Tom (Creative Ocean) used to determine the total length of the ScrollTrigger. You could use an alternative method of setting that distance. No, quickSetter works with any unit so long as you set it that way. Pixels are the most common unit for this sort of thing though. That's the position parameter. It'd depend on what sort of animations you're trying to add and where. It's too general of a question for us to really answer.

What @akapowl suggested is good also if you want to target every instance that uses “.main-content”. Then you can instead just use the child combinator > and wildcard * like he has shown for an even cleaner approach. 😉

Hm, your blue line is growing/stretching/moving, so what exactly would you want the yellow circles to do? In other words "move with the blue line" is rather ambiguous. You could certainly plot their relative position between the blue line's start/end points, and then in an onUpdate set their cx/cy values accordingly so that they move in a relative fashion.