akapowl

Hello @jinnyum - welcome to the forum. Maybe you could wrap the .astronaut group in another group and apply the y-transforms to that wrapping group instead of the .astronaut group itself. Something like this maybe? https://codepen.io/akapowl/pen/bGQbQKj

Hey there @Toliy36, welcome to the GSAP forum. your title pretty much has the answer to your question, as first and foremost you'll need to duplicate your arrow. Place the two arrows so that one of them is visible and one of them is placed "off-canvas", and then tween the visible one out of view, while at the same time tweening the not-visible one into view. This thread here has a couple of approaches / demos you could have a look at. Give it a shot yourself and if you get stuck along the way, please post back with a minimal demo of what you have tried - that makes it a lot easier to help thoroughly. Cheers.

Hello Carl, welcome to the GSAP forum. The main problem is that your CSS is not set up to align the sections beside one another. So you'll want to have another look at the many many examples for fake-horizontal scenarios like that to see how you can get that done - e.g. using flex on your main-container and adjusting everything according to that properly, or alternatively using a display: inline/inline-block setup for your sections. Here is your demo with the main container scaled down to showcase the issue causing your troubles (scroll down a bit to see the problem). https://codepen.io/akapowl/pen/mdzQmeg You can find some examples fake-horizontal setups here... https://greensock.com/st-demos/ ... and this here is one of my demos. https://codepen.io/akapowl/pen/dyvygmj Edit: Here is a rather basic Flex-Layout for your convenience - this one might be a bit easier to wrap your head around. https://codepen.io/akapowl/pen/RweqVKm

... and even kept the original Codepen Demo as it was, so others can reenact the process of this thread and learn from your Oopsie - just wonderful! Good job!

Hello there Sean. I think you just need to put the position property and z-index on the SVG itself instead of your group #seven. Does this work more like you intended? (I changed the radius of your svg circle from 80 to 75 - and added some infinite yoyo repeat to the tween; latter just for better showcasing) https://codepen.io/akapowl/pen/wvYQJXb

Been there, done that ... but in hindsight it's always funny to see what naming ideas you can come up with, when you need it the least 😅 Happy to help. That'd be great for others to see. Good luck with the project 👍

Hey there @grizhlie It sounds like you are actually looking for svgOrigin - there is no such thing as svgCenter, afaik. https://greensock.com/docs/v3/GSAP/CorePlugins/CSSPlugin#h3-svgorigin I'm not entirely sure why, but even if I set that to "200 200" which is supposed to be the center of your SVG, it doesn't align properly - very likely because of the transforms you have on your moon - so you might want to rework that in your SVG Editor. I do recall, that Affinity Designer v1 had an option to flatten transforms on export; so you might want to look for that option in v2, too - maybe it solves that problem for you. Apart from that, setting the svgOrigin to "180 180", appears to be working fine in your case, though. I hope this will help a bit at least. Happy rotating! https://codepen.io/akapowl/pen/mdzQWyp P.S.: You might also want to consider updating your syntax to the newer v3 syntax (e.g. with regard to durations and eases); although it is still supported, support for the old v2 syntax might get erased in a major future version of GSAP at some point.

Use the position parameter as you did before, but now with the stagger parameter before the position parameter removed. https://codepen.io/akapowl/pen/xxyYQjm

Hello @ninmorfeo What you are referring to as the starting parameter actually is the amount of stagger for in between starts of each element. In your converted version it should go where you now have the 1.5 - which is the actual duration of the tween, so that should go in the duration property. If the code below doesn't work for you, please provide a minimal demo that makes it clearer, what you are expecting to happen. gsap.to(chi, { duration: 1.5, x: "-=70", rotationY: 180, rotationX: -10, boxShadow: "20px 20px 15px 0px rgba(0,0,0,0.1)", ease: "power4.out", stagger: { each: 0.05 } }); Old https://codepen.io/akapowl/pen/WNaMYGG New https://codepen.io/akapowl/pen/XWxZypE

Hello @maths This thread should help with achieving that effect. Please keep in mind though, that this forum is not actually intended for requests à la “How do I do this cool effect I saw on a trendy website?”. Someone here may point you in the right direction but please don't expect tutorials on how to create any effect you saw on a web site, as stated in the Forum Guidlines. Good luck and happy tweening!

Hello @dagda1 horizontal: true is for settings, where you are actually using the browser's native horizontal scrolling, which is not the case here. You are only making the site appear to be scrolling horizontally by tweening the content to the side, while actually scrolling vertically. What you'll want to have a look at is the containerAnimation property, that was build for usecases exactly like yours. This is from the ScrollTrigger docs: containerAnimation Tween | Timeline - A popular effect is to create horizontally-moving sections that are tied to vertical scrolling but since that horizontal movement isn't a native scroll, a regular ScrollTrigger can't know when, for example, an element comes into view horizontally, so you must tell ScrollTrigger to monitor the container's [horizontal] animation to know when to trigger, like containerAnimation: yourTween. See a demo here and more information here. Caveats: the container's animation must use a linear ease ( ease: "none"). Also, pinning and snapping aren't available on containerAnimation-based ScrollTriggers. You should avoid animating the trigger element horizontally or if you do, just offset the start/end values according to how far you're animating the trigger.

Hello Maya. If you have access to a custom CSS file it might be enough to just set the transition on elements you don't want to have transitions applied to back to their default value, via using initial. https://www.w3schools.com/cssref/css3_pr_transition.php If that doesn't work for you, try specifically setting the transition-property to none and transition-duration and transition-delay to 0 or 0s. If that still won't work, as a last resort (although not really recommended) you can do all of the above with !important added at the end. And if you don't want to target every element individually, you can use the wildcard selector * instead. If you don't have access to any custom CSS file, or none of the above works for you, you're likely better of asking the people who built Elementor about this. This should at least give you some basic ideas, though. https://codepen.io/akapowl/pen/JjmrMNy

I'm glad, it helps Not silly at all - the concept is a bit rough to wrap your head around, if you don't think about it too much. If I am not totally mistaken, the calculation leading to the 6.5 seconds would be as follows. The only part we'll have a look at for now is the tween(s) for the tick-mark, because the tween(s) for the headlines don't have an effect on the timeline's total duration the way they are timed and positioned on the timeline. So; the duration for a line to scale from the initial 0.2 to 1 is 1 second. Each onel starts 0.25 seconds after the one before has started, so we need to take into account 18 lines that start later and multiply that number by the time each one starts later than the one before it does. Then we also have 1 more second to take into account for them to go back to their initial state again. 2 × 1s = 2s 18 × 0.25s = 4.5s ------------------ 2s + 4.5s = 6.5s Try picturing it something like this (although it might not be 100% accurate as I think I slightly messed up the spacing) - for me that makes it easier: ------------ 1st tick-mark in ------------ 2nd tick-mark in ------------ 3rd tick-mark in ------------ 4th tick-mark in ------------ 5th tick-mark in ------------ 6th tick-mark in ------------ 7th tick-mark in ------------ 8th tick-mark in ------------ 9th tick-mark in ------------ 10th tick-mark in ------------ 11th tick-mark in ------------ 12th tick-mark in ------------ 13th tick-mark in ------------ 14th tick-mark in ------------ 15th tick-mark in ------------ 16th tick-mark in ------------ 17th tick-mark in ------------ 18th tick-mark in ------------ 19th tick-mark in ------------ 1st tick-mark out ------------ 2nd tick-mark out ------------ 3rd tick-mark out ------------ 4th tick-mark out ------------ 5th tick-mark out ------------ 6th tick-mark out ------------ 7th tick-mark out ------------ 8th tick-mark out ------------ 9th tick-mark out ------------ 10th tick-mark out ------------ 11th tick-mark out ------------ 12th tick-mark out ------------ 13th tick-mark out ------------ 14th tick-mark out ------------ 15th tick-mark out ------------ 16th tick-mark out ------------ 17th tick-mark out ------------ 18th tick-mark out ------------ 19th tick-mark out | | v |-----------|-----------|-----------|-----------|-----------|-----------|-----------|------ 0 1 2 3 4 5 6 7 With 'keep in sync' I meant to keep the value in all lines that have that value equal across those lines. You can change that value, but if you do, change it everywhere that value is used - to properly keep both parts of the timeline in sync so to say. If any of those deviated from the others having that value, the highlighted headline wouldn't match the longest line anymore, so to say. Also worth mentioning, that the value should probably not be bigger than the duration value of the tick-mark tween(s) as that would cause the position of the headline tween() on the timeline to become negative, and that might technically lead to problems - and of course it looks a bit odd. Does that make sense to you? This way you can change the 'spread' width of the curve (if that makes sense). A rather low value in those places (and thus a rather high position parameter) would result in a visually wider spread of 'active' lines... https://codepen.io/akapowl/pen/rNqmqba ...while a rather high value in those places (and thus a rather low position parameter) would result in a 'narrower curve'. https://codepen.io/akapowl/pen/abRWRRv And since I mentioned it in the comments, too, changing the ease of the tick-mark tween(s) would result in different 'shapes of the curve formed' by the lines. The examples above all use .in eases, so their curvature is bound inwards - changing that to .out or .inOut would result in an outward bound curvature (of different degrees between .in and .inOut). [ease: 'none' would probably just form the outline of a straight triangle 🤔] https://codepen.io/akapowl/pen/mdzmaVZ https://codepen.io/akapowl/pen/ExdmGaQ By changing the base-type of the ease you can change the appearance of the distribution curve even further to achieve some really 'special' effects. Not that it will be helpful or you might want it for this specific scenario - but for different setups it might be somewhat useful maybe. https://codepen.io/akapowl/pen/ExdmGKE

Hello there @cobragtk - welcome to the GSAP forum. You likely could use the distribute utility, but I think you can also get the effect you are after with staggers just fine - in the end it'll probably boil down to what you are more comfortable with. Especially when it comes to adding in ScrollTrigger, I guess you will have even more options for how to approach this. Depending on where exactly you want to go with this in the end, some might be easier to implement/understand and/or make more sense to use, than others. The general idea of what you tried in your pen with regard to GSAP alone, looks great already, but with the initial setup you have it does logically not work, because GSAP will tween the lines from where they started to the full scale and then back to where they started, which is exactly what is happening. Since some of them started with a bigger initial scale than others, that's where your problem originates. One of the many great things about GSAP is, that it can practically tween on any object with properties that have numeric values. [See: "Any numeric value, color, or complex string containing numbers" in the Getting Started article] Since GSAP tweens and timelines are objects too, and they have properties with numeric values, to a certain degree that also includes them. [See: "Tween the progress() and timeScale() of an animation" in this Learning Center article] Now because calculating the progress of the timeline (as is a mentionin that second article linked) from and to when/where you'd want to have things animate could become a bit tricky, instead you could e.g. tween on the time of the timeline directly. With this approach that I'm going to use in the example below, I would suggest not setting the initial scales for each of your starting elements manually, but instead let GSAP handle that for you which will get rid of that logic problem you ran into. Since I'm going to use a fromTo tween, the initial setting will probably not be neccessary, but I still wanted to mention it as it can be handy on its own. Because you have your timeline set to paused anyway, you can now set the initial time of the timeline after its creation - you know how long it takes for 1 line to completely fill up, and that is exactly the time you want to set it to, because you want the first line to appear filled initially. Careful; in my demos below I set the duration to 1 - in your example the duration is the default of 0.5 as you did not specify it. const tl = gsap.timeline({ paused: true }) tl.to('.tick-mark', {...}) tl.time(1); Now that was easy enough, but you probably also want to end the animation in a state where the last line will stay at full width, right? For that, as mentioned above, you can create a new independent tween, that tweens the time of the timeline from that initial set time to the whole timeline's duration minus that amount it takes for one line to fill up - with an ease of 'none' as we're going to add the ScrollTrigger to this tween instead of the timeline itself now, and we want the tween to be scrubbed visually in sync with the scroll-position. gsap.fromTo(tl, { time: 1 }, { time: tl.duration() - 1, // tl.duration() - duration tick-mark ease: 'none', scrollTrigger: { trigger: "#wrapper", start: `top 50%`, end: `+=70%`, scrub: true, markers: true, }, } ) This should get you where you wanted with the part of the lines scaling up and down on scroll. https://codepen.io/akapowl/pen/JjmNMyw For the headlines to become animated/highlighted too, just add another tween to the timeline, making use of the position parameter to start it at the same time as the other tween and allow them to be synced. This example uses the same values for the tween on the headlines, as are used for the tween on the lines. https://codepen.io/akapowl/pen/vYVmJjE The tricky bit here is to get the timing right. I found that this final solution works well with a decent tween on the headline opacity... https://codepen.io/akapowl/pen/XWxRVOy ... but especially with an ease of steps(1) for if you just want to toggle between different opacity-values of the headlines. https://codepen.io/akapowl/pen/LYgyzzN I'd suggest, after digesting all this, start playing around with the values and see what they do when changing them. I added a few comments in the the last two examples posted, to try and pinpoint what's important there. I hope this will help. Happy tweening!

As I said; left and right work with horizontal: true OR ... Now if it is speicfically an issue with the gsap-bonus.tgz file you are having; maybe you could just upload a very minimal and as much as possible stripped down .zip-file of your project in a post of yours. Edit: Coming to think of it again, that probably isn't a good idea, since users of the free tier would be able to download it. Anyways, I think that would be something, one of the Admins would have to have a look at then.