singlexyz Posted May 2 Share Posted May 2 const state = Flip.getState(".small, .large"); document.body.classList.toggle("active"); Flip.from(state, { // how to use different ease/duration/delay for opacity fade: true, absolute: true, ease: "expo.inOut", duration: 0.5, zIndex: 10, }); See the Pen RwOzPYG?editors=0010 by nayuxuohz (@nayuxuohz) on CodePen Link to comment Share on other sites More sharing options...
Rodrigo Posted May 2 Share Posted May 2 It should be as simple as this: let isFlipped = false; function demo(ease, duration, delay) { const state = Flip.getState(".small, .large"); document.body.classList.toggle("active"); Flip.from(state, { absolute: true, ease, duration, delay, zIndex: 10, fade: true, onComplete() { isFlipped = !isFlipped; isFlipped ? demo("power2.out", 1, 1) : demo("power3.inOut", 0.5, 0.5); } }); } demo("power3.inOut", 0.5, 0); Hopefully this helps. Happy Tweening! Link to comment Share on other sites More sharing options...
singlexyz Posted May 2 Author Share Posted May 2 3 hours ago, Rodrigo said: It should be as simple as this: let isFlipped = false; function demo(ease, duration, delay) { const state = Flip.getState(".small, .large"); document.body.classList.toggle("active"); Flip.from(state, { absolute: true, ease, duration, delay, zIndex: 10, fade: true, onComplete() { isFlipped = !isFlipped; isFlipped ? demo("power2.out", 1, 1) : demo("power3.inOut", 0.5, 0.5); } }); } demo("power3.inOut", 0.5, 0); Hopefully this helps. Happy Tweening! Hi, thank you for your reply. I may have caused some confusion because I wrote the English in translation. What I actually want is to specify different ease and duration for the opacity within it. After reviewing the documentation, I found a method in a demo that allows passing custom parameters. See the Pen bGjXGeX by GreenSock (@GreenSock) on CodePen let customVars = { x: { ease: "power3.in", delay: 1, duration: 1 }, y: { ease: "power1" } }; Flip.from(state, { duration: 2, custom: customVars }); 1 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