jollygreen Posted January 21, 2021 Share Posted January 21, 2021 I was hoping I could get some direction on how to achieve the peel effect in gsap like the below. Any help would be appreciated! See the Pen axEgL by patrickkunka (@patrickkunka) on CodePen Link to comment Share on other sites More sharing options...
akapowl Posted January 21, 2021 Share Posted January 21, 2021 Hey @jollygreen Adapting that sort of effect should be pretty straight forward and cases like this one are actually great opportunities to learn how to handle GSAP and the JS that would be required to trigger that effect. For the hovering you would need some eventlisteners - mouseenter and mouseleave - to trigger a change on the playstate of the animation. You could for example set up a timeline that is paused initially and on mouseenter trigger it to play - on mouseleave trigger it to be reversed. Getting to what to do in the timeline, things should be pretty straight forward - you can see in the CSS that all transitions happen on hover. The 750ms transition on the .anim750 class basically handles all transition timings but the one on the h4 - which is specified differently. So the default duration for all tweens in your timeline should be 0.75. From here you could go through that CSS from top to bottom, checking on every hover state - best comment it out first and not delete it right away, so you still have a reference to check on - and add every single one of those with its :hover-values as a .to()-tween to your timeline, using the position parameter to make sure they all start at the same time. When you're done with that, make sure there aren't any further specified transitions left on any element (the only on should be on #Awesome h4 ) which could interfere with GSAP's tweens and you should be good to. At the end you could also change the easing if you wanted, because by default GSAP uses a out-ease and that example uses an in-out. Edit: Changing the ease (either on every single tween or even better in the defaults of the timeline) to something like "power1.inOut" would probably be better to do right away, so you will not get any unexpected timing issues because of your tweens behaving too different from the CSS-transitions along the way. As mentioned, this is a great case to learn on, so give it a shot yourself, and if you find yourself having any specific question or running into an issue you can not get past, let us know. Happy tweening 4 Link to comment Share on other sites More sharing options...
jollygreen Posted January 21, 2021 Author Share Posted January 21, 2021 @akapowl, Thank you for your insights. I'm doing something wrong because it is not working. Could you please take a look? See the Pen LYRvBEd by jollygreen10 (@jollygreen10) on CodePen Link to comment Share on other sites More sharing options...
akapowl Posted January 21, 2021 Share Posted January 21, 2021 Hey @jollygreen If you set the position parameter on each of the tweens in your timeline to 0 for example, you'll see it work pretty well on first mouseenter. I would take the setup of the timeline out of the mouseenter-event and set it up beforehand instead and also set the timeline to paused initially. const timeline = gsap.timeline({ paused: true }); Then on mouseenter, similar to what you do on mouseleave, you can just call timeline.play(); there. Your mouseleave-event actually does nothing though, because you have a typo in there: mouseeleave it says in your demo On a sidenote: You do not have to set up all those variables like you did. Instead, you could simply just write ... .to('.sticky', {duration:.75, rotation:10}, 0) ... if you wanted. But that of course depends on the exact scenario all that takes place in. Also when all your tweens in your timeline are supposed to have the same duration or ease, you could set defaults for the timeline, like so: const timeline = gsap.timeline({ paused: true, defaults: { ease: "power1.inOut", duration: 0.75 } }); If one of your tweens should have a different duration than the set default e.g. you could specify that on the tween itself then. 3 Link to comment Share on other sites More sharing options...
jollygreen Posted January 21, 2021 Author Share Posted January 21, 2021 Hi @akapowl Thank you. What about the h4 element? It appears when I hover it. See the Pen LYRvBEd by jollygreen10 (@jollygreen10) on CodePen Link to comment Share on other sites More sharing options...
akapowl Posted January 21, 2021 Share Posted January 21, 2021 Good job!! 41 minutes ago, jollygreen said: It appears when I hover it. I don't know why you put that tween on the h4 in your mouseleave there, but when I remove that, it's working just like in the demo you provided initially. Is it not for you? See the Pen f76fa6864d79d897f01b2f2b57b6c880 by akapowl (@akapowl) on CodePen I went ahead and made your targets a bit more specific (so you don't end up animating all h4s on your page for example) and removed those durations of .75, because you don't need them anymore since you have those in the defaults. 1 Link to comment Share on other sites More sharing options...
jollygreen Posted January 21, 2021 Author Share Posted January 21, 2021 16 minutes ago, akapowl said: I don't know why you put that tween on the h4 in your mouseleave there, but when I remove that, it's working just like in the demo you provided initially. Is it not for you? Yes, it works for me too when remove it. Thanks. 17 minutes ago, akapowl said: I went ahead and made your targets a bit more specific (so you don't end up animating all h4s on your page for example) and removed those durations of .75, because you don't need them anymore since you have those in the defaults. got it Thank you very much! Link to comment Share on other sites More sharing options...
Solution akapowl Posted January 21, 2021 Solution Share Posted January 21, 2021 11 minutes ago, jollygreen said: Thank you very much! You're welcome Here is what I had come up with myself See the Pen 3e862dd71518b171c644ae0a0e57dd1e by akapowl (@akapowl) on CodePen It's essentialy the same as your result - only real difference is, I use a nifty little trick I learned around the forums when I was getting started with GSAP myself. The timeline is being set to reversed initially and on mouseenter and mouseleave, the same function is called, that checks on the reversed state of the timeline. If it is in reversed state (which it now is because it is set to that state initially) it will be played, else it will be reversed. In some scenarios this can come in really handy. But I don't think there is something wrong with what you landed on. Cheers and Happy Tweening Oh, and I almost forgot: For the next time it would be great, if every time you want to make changes to a codepen you provide in a post, you could use the fork button and apply those changes to the fork instead, so the continuous context of this thread will remain for future readers. 3 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