[scrollsmoother and position sticky]

Thanks @akapowl

 

That gets someway there but it doesn't seem to quite snap to the top properly. Is there a way to force the snapping as soon as the section scrolls in? At the moment this can kind of get stuck between halfway 2 sections or it reaches the top after a wee delay which doesn't feel smooth.

 

[scrollsmoother and position sticky]

I'm just playing with scroll smoothing ( which looks amazing) but ran into an issue with position sticky. The desired effect is that each section in this pen should be sticky and not scroll off the top of the viewport with each subsequent section scrolling in over the top. As soon as I add scrollsmoothing into the mix this breaks. Any thoughts? Ideally I'd like the sections to animate to the top as soon as they enter the view port. Any help would be much appreciated - I'm not an expert btw (understatement).

See the Pen zYRyYGp by jloafs-DM (@jloafs-DM) on CodePen

[Downloads]

Found it.

[Downloads]

Hi guys

 

I'm a club greensock member  and I can't recall how to download any of the gsap plugins - can someone please point me in the right direction?

 

Best

Jason

[Animate list items position]

managed to fix this - was easier than I first thought - cheers Zach.

[Animate list items position]

Thanks Zach. You're right - the flex grow property is definitely the way to go.

 

I've put a basic pen together but it's a long way off working. I've been trying to get the sidebar nav to toggle the active class that applies the flex-grow to the active sidebar element. Ideally would eventually want to hook this up to scrolltrigger too so that the sidebar elements navigate as their associate section scrolls into view. Any thoughts on how to handle this? Sorry I'm a bit out of my depth

See the Pen GRvOWNa by Jloafs (@Jloafs) on CodePen

[Animate list items position]

That's what I thought initially but I couldn't figure out what flex properties to use to position nav elements at the bottom then animate to the top - what are the 2 position states I need to use? Each item in the nav needs to push up to the top individually (pushing the nav item above it up without moving those below it). Does that make sense?

[Animate list items position]

Hi all

 

Does anyone have any idea how to achieve this. I'm trying to animate this menu so that the menu items move from top to bottom (shown in the attached images) when clicked or based on scroll trigger position.

 

The triggers are not the issue - I just can't figure out what properties to animate. I had initially thought I could achieve using justify content etc but that doesn't work.

 

Many thanks for any help.

[Multi-part slider]

Yeah, apologies. I carried on and got it working.

 

Many thanks - really helped me to get my head around how to start it all off.

[Multi-part slider]

Making some progress ( a little).

 

I'm focussing on animating the text element on the left.

 

I think I have the slide-in working OK but struggling with sliding the text out of thee bottom of the container.

 

Ideally the first text should slide in from left then out of the bottom before the next item slides in from left and so on.

 

Is there an easy way to add this to my timeline?

 

Codepen here: 

See the Pen bGrWarv by Jloafs (@Jloafs) on CodePen

 

Many thanks for any help.

[Multi-part slider]

Thanks guys - I've been putting this part of the site off for a while haha.

 

I think I have an idea of how to go about it. Should be fun.

 

thanks heaps.

[Multi-part slider]

Thanks Cassie

 

I think the part I'm struggling with is I'd normally have list items for a slider either stacked horizontally or vertically (depending on the direction of the slider) and hide them using overflow hidden, then scroll them into view using a transform. The big difference I guess in this case is that while the image slides in from the right as I'm use to, the text is coming from a vertical position. I guess I'm trying to figure out how my list of slides would have to stack - like how would they appear if the overflow wasn't hidden - as each slide seems to contain element that come into view but from different directions. 

 

Even as I write this I think it's difficult to explain. Does this make any sense?

[Multi-part slider]

Thanks for spotting that - might be related to sharing preferences in dropbox. I've edited the link - hopefully it works OK.

 

Many thanks.

[Multi-part slider]

Does anyone have any ideas on how to approach this slider concept? (See screen recorded video on dropbox)

 

Each element in the slider has an image and 2 text elements that all animate in different directions. I've only ever done a simple slider that translates a whole slide out of view as another slide comes into view.

 

Appreciate any help at all on this, however small - I literally can't even think how to start it lol.

 

[Very basic draggable question]

Yes. Perfect! Thank you so much

[Very basic draggable question]

Hi guys

 

I'm pretty inexperienced and just trying to achieve something quite simple using draggable plugin. Can anybody help me to stop the images inside this  draggable container from scrolling beyond the left and right edges of the first and last image?

 

I've read through the documentation and tried scrollLeft and bounds etc but just can't get anything to work.

 

Many thanks in advance :-)

See the Pen WNEvGOy by Jloafs (@Jloafs) on CodePen

[Custom wiggle combined with scrolltrigger]

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.

 

[Custom wiggle combined with scrolltrigger]

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.

[Custom wiggle combined with scrolltrigger]

Ah, I've got it - thanks heaps Cassie.

[Custom wiggle combined with scrolltrigger]

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?

[Custom wiggle combined with scrolltrigger]

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.

[Custom wiggle combined with scrolltrigger]

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.

[Custom wiggle on a pseudo element]

Oh man. Legend! thanks heaps.

[Custom wiggle on a pseudo element]

Hi everyone - thanks heaps in advance for any help. I'm trying to use the custom wiggle plugin for the first time on a pseudo element. I want the pseudo element to wiggle on rotation and loop infinitely. Really struggling with this - I don't think the custom wiggle is being used for the ease. Can anybody spot where I'm going wrong?

 

gsap.registerPlugin(CSSRulePlugin, CustomEase, CustomWiggle);
var rule = CSSRulePlugin.getRule(".intro--image-wrap:before"); //get the css rule for the :before psuedo element
CustomWiggle.create("iconWiggle", {wiggles:10, type:"random"}); // create the wiggle
const introIcons = gsap.timeline({})
introIcons.to(rule, {duration: 0.5, cssRule: {rotation: "2", ease: 'iconWiggle'},yoyo:true, repeat: -1, })

 

[ScrollTrigger Not working after Barba Transition]

I'm having the same problem with Barba and scrolltrigger but don't want to abandon Barba. Has anyone had that same problem and found a solution? I'm new to gsap and javascript too btw so not an advanced user by any stretch of the imagination