Vero Posted February 14, 2022 Share Posted February 14, 2022 Hello, I am trying to make an animation for CTA button that is basically scale up, scale down, scale up and scale down. Right now to achieve this our users have to ad 4 scale animations to an element. I want to make an effect called pulse that will do the same just with one animation. I tried it with customBounce, scale:110 and ease of the bounce const mybounce = CustomBounce.create('myBounce', { strength: 0.6, endAtStart: true }); but it doesn't look the same or I'm not sure how to make it look the same. Is there some other way how to achieve the pulse animation without having to insert 4x scale? Thank you Link to comment Share on other sites More sharing options...
Vero Posted February 14, 2022 Author Share Posted February 14, 2022 I guess CustomEase will be the answer right? Link to comment Share on other sites More sharing options...
Carl Posted February 14, 2022 Share Posted February 14, 2022 Actually, unless you need a very specific timing with your easing, I think just having a tween with a repeat value should suffice. For a repeating pulse I think this is probably the most beginner-friendly approach See the Pen NWwvZqz?editors=0010 by snorkltv (@snorkltv) on CodePen If you want to scale up, down, up, down, set the repeat value to 3. I used 8 so you have more time to experiment with the effect. If you or your co-workers need help with GSAP basics, please check out my free GreenSock beginner's course. 2 Link to comment Share on other sites More sharing options...
Vero Posted February 14, 2022 Author Share Posted February 14, 2022 I need a specific timing. The user is creating a banner, selects and element and adds the animation to it. The animation has a certain duration and within this duration the pulse repeats itself and then stops while the timeline itself keeps going. It looks better visually when I use what you provided but the duration is for one scale and then it keeps repeating again for the full length of the duration. Link to comment Share on other sites More sharing options...
Carl Posted February 14, 2022 Share Posted February 14, 2022 ah, my bad. I assumed the call to action was interactive. without interactivity I'm not sure where the trouble is. I'm not following what you need as you have full control over the duration and number of repeats regardless of the ease. you can also shift the timeScale() if you need to conform to some other timing / duration constraints. perhaps if you can provide a minimal demo that shows the ease you are using and little more info on where you are having trouble myself or someone else can help get you the info you need. 2 Link to comment Share on other sites More sharing options...
Vero Posted February 14, 2022 Author Share Posted February 14, 2022 I will make a demo tomorrow thank you Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now