Jump to content
Search Community

Custom wiggle combined with scrolltrigger

Jloafs test
Moderator Tag

Recommended Posts

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

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

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

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

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.
 

  • Like 2
Link to comment
Share on other sites

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

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!

  • Like 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...