Leaderboard

Welcome to the forum @shutterlab thanks for supporting GreenSock with your Club Membership. It does not appear as if that version of the site has launched yet, how do you know it's based upon scroll ? ? https://www.the-cave.co.uk/ https://dribbble.com/shots/15219461-THE-CAVE Regarding scrolling you could use overflow: hidden; on the body or a container. Then within either layout all your relative content. With GSAP’s scrollTo plugin you can then move around based upon an assigned class, id or provided x/y coordinates. GSAP's ScrollTrigger plugin can also be used with scrollTo. You could just use ScrollTrigger to move around also, using coordinates, the MotionPathPlugin, etc. You could also move around using Mouse / Touch movement, GSAP’s Draggable plugin, or even move around within an SVG viewbox. You would need to implement the desired parallax / easing logic regardless of which approach you decide upon. You have access to all these powerful plugins as part of your GreenSock Membership. You may find interest with the example found in this thread concerning Draggable. You can search the forum and find various concepts for all these things. Good luck on your project. ?

Hi @RhanXerox welcome to the forum. But I’m confused, that codepen is by @mikel and has nothing to do with Swiper. It seems to work fine to me ? Even without seeing an example I would guess it’s not a GSAP issue at all. But an event logic integration issue with Swiper, or a general code logic issue. But without seeing a minimal demo demonstrating the specific issues you are having it's impossible to help. If the issue is relative to GSAP someone will try to help, though we try to keep questions centered on the GSAP aspect.

Okay I think I understand. You want the dashed path to change color as the user progresses through the stop points, right? I think I'd create my base dashed path and a duplicate in a different color. The duplicate could then be masked and revealed with DrawSVG. Maybe something like this. https://codepen.io/PointC/pen/PoWwOLg I just did a copy and manual paste for each path in this demo, but the d attribute is the same so you could tighten this up a bit more by cloning the base path or just setting the d attribute. Hopefully this is what you meant and I'm not still confused. The DrawSVG plugin is a Club plugin. More info: https://greensock.com/club/ Happy tweening.

You might also be able to gain something from these examples which use GSAP + Three.js with similar effect. • https://codepen.io/ReGGae/pen/povjKxV • https://greensock.com/forums/topic/22768-text-underline-page-transitions-that-are-super-smooth/?do=findComment&comment=118065 • https://tympanus.net/codrops/2019/10/21/how-to-create-motion-hover-effects-with-image-distortions-using-three-js/

Clever approach! Thanks for the demo. I set overwrite:true on the progress tween in the fork below. https://codepen.io/snorkltv/pen/QWdwyVg?editors=0010 Does that help? For more on overwriting check out: Handling Conflicting Tweens

Hey @stefanopeschiera Just to make sure: @GreenSock was probably referring to the distortion-effects on the images on scroll. If it is only the reveal-effect on the preload background-overlay you are after though, you can achieve that by tweening on SVG paths, as discussed in this thread (it even contains an example that is pretty similar to the reveal on that page you linked to)

Sure, but it may be simpler to just use some vanilla JS for this because you won't need to have an extra element that obscures pointer events (like if you needed to make things clickable, like those buttons): let startX = 0, startOffset = 0, getEvent = event => (event.changedTouches && event.changedTouches[0]) || event, // to make it touch-safe events = document.body.onpointerdown ? ["pointerdown","pointermove","pointerup","pointercancel"] : document.body.ontouchstart ? ["touchstart","touchmove","touchend","touchcancel"] : ["mousedown","mousemove","mouseup","pointercancel"]; // when the user presses on anything except buttons, start a drag... document.addEventListener(events[0], event => { const e = getEvent(event); if (e.target.tagName.toLowerCase() !== "button") { document.addEventListener(events[1], onPointerMove); document.addEventListener(events[2], onPointerUp); document.addEventListener(events[3], onPointerUp); startX = e.pageX; startOffset = scrub.vars.offset; } }); function onPointerMove(event) { scrub.vars.offset = startOffset + (startX - getEvent(event).pageX) * 0.001; scrub.invalidate().restart(); // same thing as we do in the ScrollTrigger's onUpdate event.preventDefault(); } function onPointerUp(event) { document.removeEventListener(events[1], onPointerMove); document.removeEventListener(events[2], onPointerUp); document.removeEventListener(events[3], onPointerUp); scrollToOffset(scrub.vars.offset) } Here's an updated demo (fork): https://codepen.io/GreenSock/pen/RwKwLWK?editors=0010 Is that what you had in mind? So now you can scroll, drag, or click the "next/previous" buttons to infinitely scroll. Fun!

A good one to bookmark if you're transitioning from jQuery to vanilla JS. http://youmightnotneedjquery.com/ Happy tweening.

I'm a little late to the party, but I think the link to my dashed lines tutorial should help. Though I'm not quite following the desired outcome here. Are the dashed lines changing stroke color? I couldn't quite tell from the video, but it almost looks like a solid stroke fades in and then the dasharray changes. Maybe I'm just confused.

The animations in mikels demo are connected to set up timelines (respective for each section) and these timelines (with their individual tweens) only get triggered when that respective section comes into view. Since in your demo you have your own animations set up as single tweens, they will fire right away depending on the delay you have set to them. So as @Shrug ¯\_(ツ)_/¯ already stated, you would first have to remove the gsap in front of all your tweens. Now you have made sure that those tweens are connected to that respective timeline that is named in the line above. But since now they are connected to the timeline they will be played one after the other with your delay now not being the delay from the start/zero anymore but from the previous tween. So you basically want to take your delay and put it in the position parameter instead ( more about that right below the video in the docs). If you don't have a delay set, make sure that tween starts at 0. So this animations[0] // Smart Training ====== gsap.from('#slide01 .olivoSt',{autoAlpha: 0, duration: 3, y: -200, ease: 'expo.inOut'}) gsap.from('#slide01 .selloSt',{autoAlpha: 0, duration: 5, y: 200, ease: 'expo.inOut'}) gsap.from('#slide01 .jumping',{autoAlpha: 0, delay: 1.2, duration: 4, y: 300, ease: 'elastic.out(1, 0.3)'}) gsap.from('#slide01 .anima1',{autoAlpha: 0, delay: 2, duration: 2, y: -30, stagger: 0.7}) gsap.from('#slide01 .tituloSt',{autoAlpha: 0, delay: 2, duration: 3, x: 100, ease: 'expo.inOut'}) would become this animations[0] // Smart Training ====== .from('#slide01 .olivoSt',{autoAlpha: 0, duration: 3, y: -200, ease: 'expo.inOut'}, 0) .from('#slide01 .selloSt',{autoAlpha: 0, duration: 5, y: 200, ease: 'expo.inOut'}, 0) .from('#slide01 .jumping',{autoAlpha: 0, duration: 4, y: 300, ease: 'elastic.out(1, 0.3)'}, 1.2) .from('#slide01 .anima1',{autoAlpha: 0, duration: 2, y: -30, stagger: 0.7}, 2) .from('#slide01 .tituloSt',{autoAlpha: 0, duration: 3, x: 100, ease: 'expo.inOut'}, 2) .reverse(); ...as you also missed the .reverse() at the very end. Same concept applies for that other section of yours. This should work as expected - give it a shot.

Yep, it was a very intentional change because: The old "auto" default overwrite mode sometimes caught people off guard, so opting in ensures people are aware of what's going on. Overwriting costs some overhead processing-wise, but in the vast majority of cases you don't really need to do any overwriting so it's just a waste to always do by default. Even when you've got two competing tweens running, the "last one wins" rule applies so people almost never notice it anyway. The only time it becomes a stumbling block is when the new tween has a shorter duration than the old tween. That wouldn't work because the 5th parameter is the value that you want mapped. But like you said, it's quite easy to get the result you want: const convert = gsap.utils.pipe( gsap.utils.clamp(0, 1000), gsap.utils.mapRange(0, 1000, 2, 0.5) ); console.log(convert(-100)); // 2

I obviously can’t see what you have done locally. But I highly suggest if you’re new to GSAP then spend time reading through the documentation and various articles before spending time trying to modify others examples for your own use.

You can link to the scrollTo plugin found on cdnjs for example. Most times it’s just simpler to create a CodePen instead as all the plugins are included to use and test over there. I would suggest using the ScrollTrigger plugin for any scrolling logic. You can find plenty of documentation, learning resources and countless examples here on the GreenSock site.

It's totally fine to wrap your animations in a modular function and use timelines...there are several logic problems in your code: gsap.to(animLogo()) This doesn't make sense - I'm not even sure what you're trying to do here, but what's happening is you're calling the animLogo() function which creates a NEW timeline (each time you call it) and then you're feeding that as the target of a gsap.to() tween...without any vars. It's like saying "animate this new timeline...to nothing...) if(animLogo.progress() == 1){ This is invalid JavaScript. You're trying to call progress() on a literal function definition itself. In other words, animLogo is a function, not an animation. Lastly, the reason you're only seeing it animate once is because each time you call animLogo() it's creating a new animation to the SAME end values, so once it runs once, it's already at those end values so subsequent animations won't appear to do anything. For example, if you animate something to rotate: 360, let that animation finish, and then you try to animate it again to rotate: 360, you're effectively saying "animate from 360 to 360" (so it doesn't appear to animate of course). Let us know if that makes sense or if you still need some help with something.

Hey @gianlucas90 - welcome to the GSAP forums. I am not 100% sure I understand what it is you are saying. Do you mean that it doesn't work for the white part on top when scrolling back up to it as it does for the other sections? That is to be expected, because the white part is a div that doesn't have the class of panel which would be neccessary for it to work like the other sections - thus it doesn't have a ScrollTrigger with an onEnterBack-callback. Ideally for semantic consistency make it a section too and add the panel class to it and it should work. But maybe I am just misunderstanding. Is this what you were after? https://codepen.io/akapowl/pen/beea58cb351ec98a9290fbdb20f7b562

When I just create a variable to the timeline (removed it from the function) and do `animLogo.play()` it works as you want it to. I've also set `{ paused:true }` to the time line to stop it from playing on page load. Here is the code I have right now: https://codepen.io/mvaneijgen/pen/LYxERww Your next animation (animBoxTL) doesn't do anything, because you didn't tell it to do anything tl.to("#boxTR", { duration: 3, // the time of the animation yoyo: true, // Moves forward and backwards if there is an repeat (which is not set) https://greensock.com/docs/v3/GSAP/Tween/yoyo() transformOrigin:"50% 50%" // Sets the origin of the elemetns tranfrorm // Missing animation. For exmaple rotation:90, }); Here is your code working with a rotion add and the same tweaks as my first example https://codepen.io/mvaneijgen/pen/WNRbooM

I've already figured out some issues with the dynamic duration. I didn't know the velocity is negative when scrolling up. And I thought `mapRange` would already be clamping. It's nice to have the option that it doesn't and with pipe its easy to chain; but – you know me In my opinion it's inconvenient to update the same values in both the clamp and the mapRange function when I want to find the right values for my application. What do you guys think about a clamp-boolean parameter in mapRange? Somethine like this: `mapRange(0, 1000, 2, 0.5, true)` ? Anyhow: I've forced the velocity to a positive number and added a clamp, so now the max and min duration is actually 2 and 0.5 seconds. It feels good to me now. What do you say? https://codepen.io/katerlouis/pen/rNjaMeY PS: Yeah, I had a few projects that didn't require any animations what so ever (you know I've still added a ton; but nothing complex). I've learned a good and important amount; but man am I glad to am back in the saddle – It was only me using the account anyways, so I figured to rename it. Glad that you remembered me

Hmm, it seemed to hold up well in my quick tests, but I don't doubt you. Have you tried removing all the custom velocity-based stuff? My suggestion would be to roll-back and get it working with more basic features and then see where it breaks. Unfortunately, I don't have the time to jump in there and do deep debugging. Glad you liked the overwrite video though! @GreenSock can speak better to the change in overwrite modes for GSAP 3. I'm pretty sure the default of true requires less overhead and better performance. Carl ps. good to know you are previously Kreativzirkel

Thanks for both of your responses. I had to ask this question just to sanity check myself and it does indeed work. We at my company are in the process of switching over to GSAP in a larger application so there is some porting needed. Most of our stuff is in the timebase of milliseconds and I thought I had already ported over all of our values to seconds but I had missed a spot ?‍♂️ So the animation was running thousand times slower and getting cut off before it got a chance to finish. Sorry for this lame question, **** just happens sometimes. BR GlennarN

Yes! Thank you so much ?

Hi, I'm using jQuery.each(); to build a timeline for multiple elements and have found good documentation on how to start the animation by clicking on the element that has the animation assigned to it, but I can't figure out how to use a button within the element's container to reverse the animation. I'm sure I'm pretty close I just can't quite figure out the correct syntax to "find" the animation when I'm not clicking on the element with the timeline assigned to it. Here's the example: $(".card").each(function(){ var myHeader = $(this).find("h1"); var myParagraph = $(this).find("p"); var tl = new TimelineLite(); tl.to(myHeader, 0.5, {x:100}) .to(myParagraph, 0.5, {x:100, color:"pink"}) .reversed(true);//this reverses the playhead at a time of 0. when you "un-reverse" on click it will play forward this.animation = tl; }) //un-reverse the animation of the card that is clicked on $(".card").click(function(){ this.animation.play(); }) $(".close_it").click(function(){ $(this).parents(".card").animation.reverse(); })

Hey Everyone, I just finally finished the first version of my personal portfolio site. It's heavily reliant on GSAP and ScrollTrigger. https://seancameroncooley.com Please let me know if this is not allowed, but I just wanted to give a huge thank you to this community and especially the moderators for all your help. I Wouldn't have been able to get this site live without the guidance of these forums. This was my first time working with both GSAP and ST, and I'm in love. I'll be sure to try and pay it forward with what I've learned working on this project. I'd love to get your feedback or tips for improvement.

As @Rodrigo suggested above, I would also say have look through @PointC's MotionTricks learning site. He has various tutorials that should help you and even one on Dashed Line Animation. Many of the tutorials and examples will also show how to use drawSVG with masks etc., to help you accomplosh various outcomes.

Glad to hear things are making sense now. Feels good, right? ? Enjoy.

Hi Benoit, Thank you for the demo it actually helped expose a great solution! There is a big difference between what you are doing with GSAP and Snap. Your GSAP demo is scaling the entire <svg> but your Snap demo is scaling the <g> child element. When both engines scale the same element side by side, the results are pretty much identical: http://codepen.io/GreenSock/pen/KpzeBy