Jloafs Posted June 13, 2021 Share Posted June 13, 2021 Hey guys I'm trying to apply a repeating wiggle on an element that also changes its Y value using scroll trigger - ie the element is continuously wiggling regardless of scroll but the Y position change is triggered on scroll. Is that even possible? currently I seem to be able to achieve only one or the other. Link to comment Share on other sites More sharing options...
GreenSock Posted June 13, 2021 Share Posted June 13, 2021 You want the "y" to wiggle but you also want the "y" to be controlled separately by a ScrollTrigger? Got a minimal demo? That would be a tremendous help in terms of troubleshooting. You could definitely animate yPercent and y separately to get a combination effect. Link to comment Share on other sites More sharing options...
Jloafs Posted June 13, 2021 Author Share Posted June 13, 2021 Thanks guys - I put this together as a demo: See the Pen xxqQGgB by Jloafs (@Jloafs) on CodePen I'm trying to animate the blue box (a psuedo element). So far the custom wiggle seems to work but not the scrolltrigger Y behaviour. I tried using yPercent in the scroll trigger but it didn't seem to work either. Any help solving this would be amazing. Link to comment Share on other sites More sharing options...
Cassie Posted June 13, 2021 Share Posted June 13, 2021 Ah, yeah. pseudo elements are tricky. They're hard to target, so you're on the right track with the CSSRulePlugin. I usually animate CSS variables and let the values trickle down to the pseudo element - maybe that's a good route? See the Pen 4206bf480334c0e5784ebb3c9d64021c?editors=0110 by cassie-codes (@cassie-codes) on CodePen 2 Link to comment Share on other sites More sharing options...
Jloafs Posted June 13, 2021 Author Share Posted June 13, 2021 Thanks Cassie, great pen. I haven't done anything that way before (the use of variables etc) - very interesting. I'm slightly struggling to work out how to apply a rotation to the wiggle. Any thoughts on how that would be achieved? Link to comment Share on other sites More sharing options...
Jloafs Posted June 13, 2021 Author Share Posted June 13, 2021 Ah, I've got it - thanks heaps Cassie. 1 Link to comment Share on other sites More sharing options...
Jloafs Posted June 13, 2021 Author Share Posted June 13, 2021 Oh - just when I thought it was working… I forgot to mention that my project is built with scss. The css variable approach clashes. Is there a scss based way of doing this Cassie? Many thanks for your help. Link to comment Share on other sites More sharing options...
Cassie Posted June 13, 2021 Share Posted June 13, 2021 SCSS variable and CSS variables shouldn't 'clash' - they achieve different purposes. CSS custom properties are evaluated by the browser at runtime. SCSS variables aren't, think of CSS vars as a bridge between CSS and Javascript. 2 Link to comment Share on other sites More sharing options...
Jloafs Posted June 14, 2021 Author Share Posted June 14, 2021 Thanks Cassie. Obviously my diagnosis of the isue was completely wrong lol. I just can't translate what's working in the pen into my actual project. The scroll trigger animating of the --y variable seems to work but not the custom wiggle. Link to comment Share on other sites More sharing options...
Cassie Posted June 14, 2021 Share Posted June 14, 2021 So what I'd probably do is try to narrow down the issue. Can you apply a simple tween to a DOM element, without CSS vars, using the custom wiggle? If you can then try with CSS vars, then with a pseudo element, then you'll know where the issue is. I suspect it's an issue with including customEase or customWiggle? Let me know how you get on! 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