Leaderboard

@eneko.dev You can achieve this by using two different .characters and start/end move depending on "bikeOMatic" position. ? https://codepen.io/nicofonseca/pen/f70523088ca11cad4f3929633e3a71c2

Hi Vitalij, I'm afraid we don't have the resources to sculpt custom solution for people in these forums. We're more than happy to help with GSAP-specific questions though. Why don't you give it a shot and if you get stuck come back here with a question. Here's a carousel for some logic to get you started https://codepen.io/GreenSock/pen/wvdJEXV And here's a plugin that may prove useful

+1 for flatten transforms. These are my Affinity settings if it helps at all ☺️

Hey @KiwiVFX, welcome to the forum! ? That is more like css issue because if you need width:0 with padding you need to set in the child element. https://codepen.io/nicofonseca/pen/c497e89ba1c9931e8fc2c6a5a142fe17

WOW thank you all, I'll study all those codes the coming days, it goes much deeper than what I need but always interesting to learn some tricks

Sounds similar to this:

Hey Weinde, You can define the relevant objects for a loop. Then this is how it works https://codepen.io/mikeK/pen/XWgMvGy?editors=1010 Does that help? Mikel

Something like this? ? https://codepen.io/nicofonseca/pen/f7401218a6d6adac9fa8567fb2f580af or animating each element https://codepen.io/nicofonseca/pen/b6044cbd184a6019346683d1ead98dfb

I can give it a try, but I'm not sure, I 100% understood the end goal here. This is what I've got: The nav is position: fixed with the content underneath it being position: relative and the first section having a margin-top of 600px - this will push everything down the amount of space the nav needs to be displayed fully initially with the content underneath it (on y-axis). In the ScrollTrigger I set an ease: 'none' to the animation so it will be in sync with the scroll and since you will reduce the height of the header by 400px, the end of that scrollTrigger is set to that exact amount "+=400px", so the content beneath the nav will scroll along with the reduction of the height of the nav. Is this close to what you wanted, @Dipit Maurya ? https://codepen.io/akapowl/pen/1ef841222e3f65cd77ef4758e065da6a Edit: It might be better to wrap all that content in another div, set a padding-top of 600px to that wrapping div instead of the margin-top on the first section and also use that wrapping div as the trigger instead of the nav - as I noticed that if you refresh the page further down, the animation will not have finished when it probably is expected to be; now it will/would. https://codepen.io/akapowl/pen/3f4776e49e46d84508782ce769796fab

I only used querySelector to get the div child from valOne/valTwo and set the innerHtml. I don't know if I understand what you need, but the clip animation is not doing anything. Also, you need to use clip-path instead of clip as it is deprecated, you can learn more here. I leave you an example of a clip-path animation ? https://codepen.io/nicofonseca/pen/4fc55558b1a5fc49a4170e4b6031aa59

Hey WEINDE, Welcome to the GreenSock Forum. This could be an option if I interpret you correctly. https://codepen.io/mikeK/pen/eYRvXKg Happy tweening ... Mikel

Hey there HadiH, Looks like you may be overcomplicating things a bit! Timelines are great for building sequenced animations - so if you're just trying to make an animation flow after another one there's no need to call a new timeline in an onComplete function with just one tween in. You can add that tween to the end of the original timeline and by default it'll play when the previous tween completes. If you need to overlap the tweens you can use the position parameter. I'd also recommend setting the description position with CSS rather than calculating the SVG height and setting margin values in the JS. https://codepen.io/GreenSock/pen/XWgMjqy?editors=0010

Hi, For anyone familiar with Beads of Courage, it's a way to track a child's medical journey. I've digitised my little girls, and I am in the process of documenting her entire journey. Here's a quick codepen: https://codepen.io/kingsloi/pen/rNwyBRe The beads are 33ft long. It's a very long site, I understand the complications/limiations. I've split the images into more manageable chucks, and then further split it so I can add text at certain points - it this text I want to animate. I want to animate it so as you scroll, the text is made visible, and animates. If you scroll up, they disappear. `fullsize__image` contains the full 33ft of beads, split into 10 images. it's these images that I actually display to the user. I do this because the images in `timeline__image` are NOT the same size, and do not align correctly. This was the only way I could achieve the desired effect of having the beads scroll in their entirety, but also show certain text at certain points. These do not need to be animated. `.timeline__image-holder .timeline__image` contains the image - it is hidden (`visibility: hidden, opacity: 0`), but not `display: none`, I've done this to retain the height of the image, so I can add a little bit of text at that point in the journey. So, when a user scrolls past that point in the beads, I want the text to show/animate. `.timeline__description` is what I want to show/hide animate. I would normally spend my time figuring out how to animate, but unfortunately, I've ran out of time and just trying my hardest to get this site up and ready by the 12th. I would also love some additional animation, I'm not sure where, but open to creativity. I do not have a budget in mind - I am happy to pay whatever! Please let me know of any questions you have! Cheers, Kingsley

It is strange because I can deploy to Vercel with: import { gsap } from "gsap" No problem, no need for /dist. I deploy and everything builds and animates, but for SplitText is needs /dist. Curious why that is? For deployment, you're right it is something with the member plugins. I'm doing the private npm route so it is probably getting tripped up with step 4 where you have to do `gsap@npm:@gsap/<package>` the first time. During a Vercel deployment, it just does `npm install` by default. Aha! That's it, just need to go into Vercel and set up a custom install command. npm install && npm install gsap@npm:@gsap/<package Probably worth updating your GSAP Installation docs in the NPM section there. Likely need a similar step for Netlify.

Next.js does not support ES Modules by default. Maybe in the future. https://nextjs.org/blog/next-11-1#es-modules-support So you should import UMD files from the dist folder. About Vercel, we haven't had any people reporting an issue with it. How is it getting the member plugins? Are you using the tgz or private npm method? If you're doing the tgz method, make sure .tgz is not in your .gitignore file.

First should do the job flawlessly. i took away queryselector from my code and it worked as expected... I'll learn more on the subject. Thanks a ton - have a great weekend!

Totally is! It's the famous forest that you can not see for all the trees. Just hoping, that this is the forest, Dipit was looking for ?

It's sometimes so hard to back your brain up once you start overcomplicating things

True, i've done different approach before, those are just left overs, I'll take in account tho, Will do it cleaner - You are right.

That's it. I wanted it on the third child. i'll make it work from here, thanks a ton, you were a lot of help!!!

Another thing, you should use it like this: const tl = gsap.timeline(); tl.from(el,{...}) instead of: const tl = gsap.timeline(); const inTwoFirstValues = tl.from(el,{...}) inTwoFirstValues;

Hi Cassie, Wow you are so incredible. I saw your codepen and thought 'huh so my desired animation can actually be done so easily'. You are right that I have been overcomplicating things. Guess I need to simplify my way of thoughts and polish my code some more. Thanks for the help! ?

Thank you very very much. You have helped me a lot. I understand the solution.

Do your pages have transitions on them? Nuxt changes the scroll position after the transition is complete, which will usually happen after your onMounted, which I'm assuming is where you are creating your scroll triggers.

... a little game with circles: https://codepen.io/mikeK/pen/PojpQBe?editors=1010 Happy tweening ... Mikel

For tutorials, I would highlly recommend checking out @PointC MotionTricks. There is a lot of stuff about using clip paths and masks in there. https://www.motiontricks.com/ I'm not familiar with Affinity, but maybe this flatten transform option would help. https://forum.affinity.serif.com/index.php?/topic/85042-flatten-transforms-svg/ And it would also be a good idea to run your SVG through SVGOMG to clean it up. https://jakearchibald.github.io/svgomg/

Hi Cody For percentage transforms, you should use xPercent and yPercent. .to(".foo", { xPercent: -50, yPercent 100 }) You also have a bunch of transforms on your elements, which is messing stuff up. It's a good idea to remove those. https://stackoverflow.com/questions/13329125/removing-transforms-in-svg-files Calling setInterval is a bad idea. If you want something to repeat, you should use repeat along with repeatDelay. gsap.to(".foo", { repeat: -1 }) gsap.timeline({ repeat: -1, repeatDelay: 1 }) And overflow doesn't work for elements inside an SVG. You would need to use a <mask> or <clipPath>.

This demo here is from one of my lessons. It uses one of the technique's @GreenSock suggested. I create a circleHolder (red line) and put a circle inside it to the right. I then rotate the circleHolder and counter-rotate the child circle (using negative rotation of the parent). https://codepen.io/snorkltv/pen/MWopvBX?editors=0010 You could edit the css of course to hide the red lines. From there we build this nice ferris wheel https://codepen.io/snorkltv/pen/qBRwvgp For easy responsiveness, @Cassie is correct, SVG would be the way to go!

Hi sensenel! I'm not sure what you're asking, but you just need to wait for whatever you're loading, insert it into the DOM, and then animate it. There a bunch of ways to load and insert content, and is beyond the scope of this forum. Some pseudo code. async function loadContent() { const content = await loadMyContent(); // insert content into the DOM // now animate gsap.tp(".my-new-content", { x: 100 }); } Load and animate content (codepen.io)

Canvas is just an image, and should be treated just like you would a normal image, so you can set the size with CSS or GSAP. #my-canvas { height: 400px; } gsap.set("#my-canvas", { height: 400 }); This is the intrinsic size, and should be the size of the images. canvas.width = 1158; canvas.height = 770;

Have it hidden and don't enable until the first mouse move. Please don't try to detect touch as that will fail on computers with touchscreens. Psuedo code window.addEventListener("mousemove", initCursor); function initCursor() { window.remmoveEventListener("mousemove", initCursor); // show and enable cursor animations }

Today is your lucky day! Codepen: https://codepen.io/CJHSF/pen/3f3fa7adf3ef0fd1c99c225ede953378 Article/Source: https://tympanus.net/codrops/2019/04/10/how-to-create-a-sticky-image-effect-with-three-js/