NickNo
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by NickNo
-
-
Hi, I have this filter element that I want to pin in the navbar once I scroll to it - but can't figure out how to get it to stick - do I use ScrollTrigger pin, or do I have to fix it in css? I want it to shrink to size as I scroll up to the navbar and then sit inside the orange box...
See the Pen KKGqQrr by nickjacobsnz (@nickjacobsnz) on CodePen
-
Thanks everyone for the comments, and Happy New Year!
@Rodrigo yes I've subscribed to Carl's courses 👍
-
1
-
-
Hi, I'm looking for some help on structuring gsap code for zooming in and out of a SVG (by animating viewbox). I've mocked up the behaviour I want, but I'm sure there is a much better way - using timelines? functions? In the example, if you click on one of the circles, it zooms in, then click again (or on background) to zoom back out. If you click between B&D a bit you'll notice some weirdness...
Ideally what I want is click to zoom in, click to zoom out - if you click on another circle it zooms out from where you are before zooming into the new circle... I hope that's clear
and appreciate any tips!
See the Pen WNKbWBP by nickjacobsnz (@nickjacobsnz) on CodePen
-
This is what I ended up with - if there is a tidier/better way to do it, please let me know
See the Pen eYMEjWp by nickjacobsnz (@nickjacobsnz) on CodePen
-
1
-
-
Now that you point it out that makes complete sense
Although, not completely sure how I would create dynamic timelines?
-
Hi, I have some legend keys that animate in with a switch toggle - when I toggle them off, I want the legend to animate back out (reverse()) - but the way I have setup it up, it isn't working - can someone shed some light on why? Also, I'm creating the timeline on each toggle of the checkbox, which I realise isn't very efficient. Is there a better way to set it up, keeping in mind the #legendid will be dynamic (on some pages there will be 2 legends, 3 on others and they will all have different #ids)?
See the Pen dymvBer by nickjacobsnz (@nickjacobsnz) on CodePen
-
Hi, I'm trying to create a combined animation with scrub, with adding a class via toggleClass - at the moment the class only gets applied until the animation/trigger end - how would I keep the class applied until I reverse back up to the top?
See the Pen yLpwbOX by nickjacobsnz (@nickjacobsnz) on CodePen
-
Great stuff, thanks!
-
1
-
-
I've got this animation running where I want the red line to animate to 100% width once the second line of SplitText has animated in...
I've tried setting an active class using a callback - but can't figure out how to get it to fire just on the second line - as I've got it, it fires every time....any help appreciated
See the Pen dyvxRvd by nickjacobsnz (@nickjacobsnz) on CodePen
-
Perfect!
-
Actually, one question on this - how would I restrict the draggable movement to its parent? If I use bounds:'.timeline-year' that restricts all items to the very first timeline-year box...I thought something like 'bounds: this.target.parentNode' but that doesn't work...
-
Yes, thats perfect thanks
-
1
-
-
Hi, I have multiple draggables, and just wondering how to stop movement on one when another is in play.
In the example - the pink timeline should drag everything on it (the dots) - but if dragging a dot, the pink timeline shouldn't move...
Thanks for any advice
See the Pen qBjbYPp by nickjacobsnz (@nickjacobsnz) on CodePen
-
haha, thanks Jack, that looks like it's worked.... Just after I posted it I thought "maybe I'll remove the will-change and see what happens..." then got distracted
-
2
-
-
I'm noticing this issue in chrome where any blocks of text (or nav's etc) that have been animated are just slightly blurry - just enough that I wonder if I just need to clean my glasses
I don't notice it in other browsers - and I've found some old stuff in the forums relating to force3d:"auto", but that doesn't seem to have any effect.
Is this something that others have dealt with? Any recent updates on this issue?
In the codepen below - a static block followed by an animated block to see the difference...
Thanks
See the Pen qBmwLOm by nickjacobsnz (@nickjacobsnz) on CodePen
-
Hey that's great thanks Jack - thanks for the very helpful response!
-
Hi, I'm having a little trouble converting an old codepen over to gsap3 ... I thought I had it covered - but the transition has messed up - I have lost the skew and the back animation isn't right .... any suggestions?
GSAP3 version
See the Pen jOVoqKy by nickjacobsnz (@nickjacobsnz) on CodePen
GSAP2 version
See the Pen zYZXMJm by nickjacobsnz (@nickjacobsnz) on CodePen
-
Hi, I've got a page with a bunch of objects that fade in on scroll - then a bunch of galleries. What I want to happen is to click a 'load more' and then next set of gallery items animate in. The way I've (quickly) set it up doesn't work - I'm just wondering if I'm on the right track, or do I not even use scrolltrigger, and use something else to do this?
See the Pen GRNwvaN by nickjacobsnz (@nickjacobsnz) on CodePen
-
Thanks Zach, and sorry for the vague-ness - part of my question was how to actually stop all (including the hint which was nested)- I ended up using
var root=gsap.exportRoot(); root.pause();
Just for my own understanding - in that start button click - changing from my function call to your on('click', startGlobal) stopped the double up of the animation - why is that?
-
Hi, I'm trying to get my head around the best way to structure gsap when it comes to multiple tweens/timelines, and also controlling interactions between these and events on the page...
This stripped down example is from a project where I've got multiple separate animations going on in an overlay window - they start when the window opens - when I close the window I want to kill all the animations.
My issue is just getting my head around the best way to structure it and call timeline functions from inside other functions etc...(and I do realise the problems here might just be a general noobness and lack of understanding of scope etc..) Also, you'll see if you press start a couple of times it looks like the timeline doubles up or something - is there a way to stop any currently running animation that might be occurring on an instance of a timeline?
So, if one of the awesome helpful and patient regular contributors could point me in the right direction....:)
See the Pen bGERqMe?editors=0011 by nickjacobsnz (@nickjacobsnz) on CodePen
-
Beauty, thats cracked it
And, "check your bloody SVGs" comment noted
-
Thanks for the quick reply Zach, but you've lost me - where is that existing transform coming from (there's nothing in the html/css) - or do you mean the transformOrigin gsap is doing?
-
This animation is part of a bigger landscape with lots of other animations going on - everything is looking fine except for this one animation on Windows (10) Firefox (77) - the train should come into the station and then leave again - on windows FF the outward journey jumps to the left of the screen!
I thought maybe it was something elsewhere in the svg or my code, but even stripping it down for codepen it is still happening...
Is this a specific FF bug? or am I doing something silly?
See the Pen pogRydo by nickjacobsnz (@nickjacobsnz) on CodePen
-
That’s a really useful article thanks @ZachSaucier, immediately applicable to what I’m working on and will solve a few problems I had anticipated
-
1
-
Scrolltrigger - pinning in place
in GSAP
Posted
Perfect thanks Jack, thanks for the quick & clear response. In my actual project, the pinning jumps even at fairly slow scroll speed (unlike the codepen demo where it is a solid pin). Any idea why this would be happening?