Leemoon Posted August 19, 2021 Share Posted August 19, 2021 keyframes does not work in version 3.7.1 why? how to resolve ? See the Pen zYwgOWE by leemoon123 (@leemoon123) on CodePen Link to comment Share on other sites More sharing options...
akapowl Posted August 19, 2021 Share Posted August 19, 2021 Hey there, it does work, you just need to define your duration and delay inside of each keyframe object, if I am not missing something from the docs keyframes To animate the targets to various states, use keyframes - an array of vars objects that serve as to() tweens. For example, keyframes: [{x:100, duration:1}, {y:100, duration:0.5}]. All keyframes will be perfectly sequenced back-to-back, but you can define a delay value to add spacing between each step (or a negative delay would create an overlap). See the Pen 6a98910ae0579d970f11b838f8c28458 by akapowl (@akapowl) on CodePen 3 Link to comment Share on other sites More sharing options...
nico fonseca Posted August 19, 2021 Share Posted August 19, 2021 Hey @Leemoon, you need to set the duration for each keyframe. keyframes: [{ x: 100, duration: 1, }, { y: 100, duration: 2, delay:-1, }] 4 Link to comment Share on other sites More sharing options...
Leemoon Posted August 20, 2021 Author Share Posted August 20, 2021 OK, thanks, i get it. but i did not set the duration for each keyframe was working before the version 3.7.1 Link to comment Share on other sites More sharing options...
Leemoon Posted August 20, 2021 Author Share Posted August 20, 2021 and how to set the same duration for each keyframe , or set the total amount for the whole tween? i think the version (eg 3.6.1) is better here. it's breeze. Link to comment Share on other sites More sharing options...
nico fonseca Posted August 20, 2021 Share Posted August 20, 2021 Hey @Leemoon you can use a defaults property. For example: gsap.to("div", { delay: 2, repeat: -1, defaults: { duration: 0.4 }, keyframes: [ { duration: 2, x: 100 }, { y: 100, delay: -2 } ] }); 1 Link to comment Share on other sites More sharing options...
Leemoon Posted August 20, 2021 Author Share Posted August 20, 2021 OK @nicofonseca thanks !😘 1 Link to comment Share on other sites More sharing options...
nico fonseca Posted August 20, 2021 Share Posted August 20, 2021 And you're right, in version 3.6.1 the duration value works when use keyframes. In the release 3.7.0 the only change I can see is IMPROVED: you can stagger keyframe tweens, but i don't know if this affect that. I think @GreenSock can help us more 😅 3 Link to comment Share on other sites More sharing options...
Leemoon Posted August 20, 2021 Author Share Posted August 20, 2021 @nicofonseca yes! thank you so much! stagger keyframe is more useful! 1 Link to comment Share on other sites More sharing options...
GreenSock Posted August 20, 2021 Share Posted August 20, 2021 You're absolutely right - there was a regression in 3.7.0 that caused the default duration not to be inherited in keyframes. That's fixed in the next release which you can preview [compressed] at https://assets.codepen.io/16327/gsap-latest-beta.min.js Of course a workaround in the current version is to define "defaults" or to set a duration for each keyframe. 2 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