ZachSaucier Posted April 21, 2021 Share Posted April 21, 2021 @Cassie has started a how NOT to use GSAP "competition". We'd love to see more participants! Here's mine: See the Pen rNjQOjr by ZachSaucier (@ZachSaucier) on CodePen 2 Link to comment Share on other sites More sharing options...
Carl Posted April 21, 2021 Share Posted April 21, 2021 lol. this is awesome. you were exposed to many horrors around here 4 Link to comment Share on other sites More sharing options...
Cassie Posted April 21, 2021 Share Posted April 21, 2021 Truly truly cursed codepens Link to comment Share on other sites More sharing options...
Cassie Posted April 21, 2021 Share Posted April 21, 2021 This one is horrifyingly wonderful See the Pen VwPVZLx by ste-vg (@ste-vg) on CodePen 4 Link to comment Share on other sites More sharing options...
OSUblake Posted April 21, 2021 Share Posted April 21, 2021 Anything that uses jQuery for selectors and creating animations setTimeout/setInterval would get my vote. setTimeout/setInterval has this wonderul effect when you switch tabs and come back 10 minutes later... 100,000 animations all starting at the same time. 1 Link to comment Share on other sites More sharing options...
PointC Posted April 21, 2021 Share Posted April 21, 2021 I think I have a pretty neat solution here for getting a div to move back and forth. Think something like a yoyo, but horizontally. I'm still working on the reason the opacity doesn't go back to 100% on the second pass, but other than that, I'm pretty happy with it. Maybe I'll add a rotation this weekend if I have time. See the Pen WNRYpZY by PointC (@PointC) on CodePen Edit: I'm kinda wondering if I can make it a little smoother too. I'll work on it. 2 2 Link to comment Share on other sites More sharing options...
OSUblake Posted April 21, 2021 Share Posted April 21, 2021 Love the naming! $(".l2-ht-gr-001-bnew-iewq-4g7-kl3478-vqw-kl09-alewq-63rt-copy") That reminds of more bad jQuery stuff. Always using class names to keep track of state. if ($(".l2-ht-gr-001-bnew-iewq-4g7-kl3478-vqw-kl09-alewq-63rt-copy").hasClass("active")) { ... } else { $(".l2-ht-gr-001-bnew-iewq-4g7-kl3478-vqw-kl09-alewq-63rt-copy").addClass("active"); } 1 2 Link to comment Share on other sites More sharing options...
ZachSaucier Posted April 21, 2021 Author Share Posted April 21, 2021 @PointC I completely forgot about the CSS wrapper, haha. 2 Link to comment Share on other sites More sharing options...
Dipscom Posted April 22, 2021 Share Posted April 22, 2021 I made one too. 😅 See the Pen NWdENmr by dipscom (@dipscom) on CodePen 2 2 Link to comment Share on other sites More sharing options...
OSUblake Posted April 22, 2021 Share Posted April 22, 2021 All functions must be arrow functions that include arrow functions. Everything must be a one liner. TBH, I'm actually surprised at how smooth that animation is using setTimeout. 1 Link to comment Share on other sites More sharing options...
Dipscom Posted April 22, 2021 Share Posted April 22, 2021 46 minutes ago, OSUblake said: TBH, I'm actually surprised at how smooth that animation is using setTimeout. It's because it's written using Smarter Animation Code™️ Link to comment Share on other sites More sharing options...
elegantseagulls Posted April 22, 2021 Share Posted April 22, 2021 I call this the Nesting Doll Timeline Technique: See the Pen PoWxveg by ryan_labar (@ryan_labar) on CodePen 4 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