Animadraw Posted July 22, 2020 Share Posted July 22, 2020 Hello, i want to create this sort of animation and i need your help please. How i can do this animation with gsap and bootstrap ? (see the gif)https://cdn.discordapp.com/attachments/730034905685426204/735591611530084422/accessToken2.gif thanks for your help :) Link to comment Share on other sites More sharing options...
ZachSaucier Posted July 22, 2020 Share Posted July 22, 2020 Hey Animadraw. See my answer in this related thread: Link to comment Share on other sites More sharing options...
Animadraw Posted July 22, 2020 Author Share Posted July 22, 2020 Hi, thanks for your reply. But it's possible with bootstrap ? my grid's items have a 'col-3' class and if i click the button the class will be change to 'col-6' .. (sorry for my bad english ) Link to comment Share on other sites More sharing options...
ZachSaucier Posted July 22, 2020 Share Posted July 22, 2020 Bootstrap is not magic The core technique is the same: save the styles, change the class, animate from the old styles to the new ones. Link to comment Share on other sites More sharing options...
Animadraw Posted July 22, 2020 Author Share Posted July 22, 2020 ok, i go to try this, thanks for your help Link to comment Share on other sites More sharing options...
Animadraw Posted July 23, 2020 Author Share Posted July 23, 2020 It's done See the Pen rNxPKjL by animadraw (@animadraw) on CodePen thanks ZachSaucier for your help 1 Link to comment Share on other sites More sharing options...
ZachSaucier Posted July 23, 2020 Share Posted July 23, 2020 Thanks for sharing, @Animadraw! Link to comment Share on other sites More sharing options...
dude Posted April 30, 2022 Share Posted April 30, 2022 Hi I'm trying to animate the grid layout without success. Any suggestions? https://codesandbox.io/s/quirky-jang-5lc4ey?file=/src/styles.css:80-84 Link to comment Share on other sites More sharing options...
dude Posted April 30, 2022 Share Posted April 30, 2022 1 hour ago, dude said: Hi I'm trying to animate the grid layout without success. Any suggestions? https://codesandbox.io/s/quirky-jang-5lc4ey?file=/src/styles.css:80-84 Ah, nvm this is just an issue with codesandbox apparently.... works fine when i replicate it in codepen.io See the Pen GRQRjjR by duders (@duders) on CodePen Link to comment Share on other sites More sharing options...
dude Posted April 30, 2022 Share Posted April 30, 2022 So unfortunately, I am having the same issue that was showing up in codesandbox in my local env... @ZachSaucier have you had any insights on why the Flip plugin might not work in certain environments? Link to comment Share on other sites More sharing options...
dude Posted May 1, 2022 Share Posted May 1, 2022 Okay, I figured out the issue... sort of. Because now I don't understand why my react example in the codepen did work lol! To summarize the issue I was facing was that instead of animating between the before and after state, it would wait for a bit (the duration time) and then suddenly it would update the visualization to the new state. In my first attempt to leverage in react, I was doing this: ``` function MyComponent() { const [pos, setPos] = React.useState(true); const handleClick = () => { const state = Flip.getState('.panel'); setPos(!pos); Flip.from(state, { duration: 1, absolute: true}); } return (///) } ``` I was able to get it working by doing this instead: ``` function MyComponent() { const [pos, setPos] = React.useState(true); const state = React.useRef(); const handleClick = () => { state.current = Flip.getState('.panel'); setPos(!pos); } React.useLayoutEffect(() => { if(state.current) { Flip.from(state.current, { duration: 1, absolute: true}); } }, [pos]) return (///) } ``` 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