smallio
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by smallio
-
-
Hey @Sukru, I've just worked on a few projects with extensive side-scroll stuff, happy to send you some examples if you want.
-
1
-
-
All good solved with this + normal overflow/fixed stuff
Sorry to bother.
gsap.set(".body", {className:"-=block-scroll"}); gsap.set(".body", {className:"+=allow-scroll"});
-
1
-
-
Seems normal overflow + fixed trick does not work on the body, scroll container or content? Could someone kindly point me to the right way to go about this?
-
1
-
-
Ahh never-mind i was overcomplicating it, I guess it's easier to just to make a new foreach and just do Y or X, all solved sorry to ping.
-
2
-
-
Hey Jack! @GreenSock Been playing around with this tons, so many cool results. Is there a way to use the data attr method you used to choose between doing parallax X or Y? I get how you'd normally do it, but with data attributes it makes it so much easier to add to elements. Is there a way to go like X1.5 or Y1.5 to control both axis and speed? If so please could you show me a really simple example on the old cat demo we were looking at?
See the Pen MWVVvWz by GreenSock (@GreenSock) on CodePen
-
5 hours ago, GreenSock said:
You can't pin stuff inside a containerAnimation, sorry. That limitation is mentioned in the docs.
The only way to do something like that is with some very customized, complicated code that'd basically counter-animate the pinned stuff in the other direction (to make it seem like it's staying put while its container is moving). It'd likely be a substantial amount of work and may be fraught with potential "gotchas". You may want to either change your design or hire an expert who could tackle the complex setup (sounds expensive).
No worries, I'll just separate out into 5 separate triggers! I was wondering why it was so hard... lol.
Thank you for letting me know.
-
2
-
-
I've been stumped for a while here trying to pin each of these 5 grey sections when they reach the left hand side of the page (inside a bigger pin), then operate a separate timeline to effect each green box differently while each section is pinned. Does that make sense? Hopefully so
I've isolated the demo down as much as possible. This is actually a spin off that parallax thing you did the other day Jack @GreenSock, so perhaps you'd be able to see what I'm doing wrong quicker than someone else? Currently "sec" is pinned which holds the whole segment in place on the bigger page I've isolated this from. I've tried referring to "this" section in view but then it ignores the sidescroll and does some weird diagonal stuff.
Thank's in advance if anyone can help! -
17 hours ago, GreenSock said:
I'm not sure I follow (I'm brain-dead, it's after 4:30am and I my body is saying "I can't do this anymore"), but wouldn't it be as simple as using a negative speed?
Great stuff Jack. Thanks.
-
2
-
-
In fact, while I'm here I may as well pick your brain! - Some other libraries when you invert values it changes direction. Is there anyway to do direction with this? So say two lines go up and one goes down? Would be super useful to have a "direction" attr or something similar for when you want to quickly achieve this along with the parallax effect.
smoother.effects(".hc1", {speed: 0.5, lag: 0.5, direction: -1}); smoother.effects(".hc2", {speed: 0.5, lag: 0.5, direction: 1}); smoother.effects(".hc3", {speed: 0.5, lag: 0.5, direction: -1});
-
Very much so, thank you so much.
I love the data attr approach - do you plan to add more in SS?
That's one of the main features I loved about locomotive, having the ability to be able to quickly add side-scrolling / diagonal elements at different speeds via like 2-3 attrs. Would love to see it and use the crap out of it if you do end up adding it haha.
Regardless great demo. Cheers!
-
On 5/19/2022 at 11:43 PM, PointC said:
Just to throw my two cents out there - some CodePen accounts to bookmark and/or follow.
Talented coders that feature a ton of GSAP:
Cassie Evans: https://codepen.io/cassie-codes
Blake Bowen: https://codepen.io/osublake
Carl Schooff: https://codepen.io/snorkltvPete Barr: https://codepen.io/petebarr
Steve Gardner: https://codepen.io/ste-vg
Ryan Mulligan: https://codepen.io/hexagoncircle
Tom Miller: https://codepen.io/creativeocean
Chris Gannon: https://codepen.io/chrisgannon
Darin Senneff: https://codepen.io/dsenneff
Craig Roblewsky: https://codepen.io/PointC/ (this guy is awesome 🤣)
It may not be exactly what you need, but there should some good inspiration in those accounts.
Happy tweening.
great list dude
-
Just looking to add delay / speed to this to make the images parallax while horizontally scrolling. It works fine vertically but I assume I need to pass in window width or something to get it working horizontally? Can't figure it out for some reason.
I'm currently working in a much larger project which I can't isolate easily so hopefully this example demonstrates the idea.
Thank you in advance for any replies!
EDIT - Would be an awesome feature to just pass in direction: X or something to do this quickly.
See the Pen dydpJzY by GreenSock (@GreenSock) on CodePen
-
-
Hi all,
I'm wondering if someone can point me to an example of gsap draggable to connect boxes from points (basically a flow chart).
I'm referencing these examples but trying to do it in GSAP. Are there any basic examples on the forum people know of to learn from? The examples below are a bit over my head and I'm looking for something super basic as I'm just starting to learn canvas.Cheers!
See the Pen aREgLG by huytd (@huytd) on CodePen
-
2 minutes ago, PointC said:
All good my friend. Still helping as many people as we can around here.
You probably missed the launch of my tutorial site during your hiatus.
Let us know if you have any questions diving back into GSAP. Happy tweening.
Very cool mate congrats! I shall do.
-
2
-
-
4 minutes ago, PointC said:
I thought that name sounded familiar. Welcome back and good to see you again @smallio.
Where have you been hiding the last few years?
Haha cheers Craig, working a lot mate! Setup a few businesses (which I 100% could not have done without learning GSAP - Big love to the team), and now back to really dive deep now I have a bit more time and things are running smoothly
Hope you're well mate, how is everything your end?
-
2
-
-
2 minutes ago, Cassie said:
ScrollTrigger pre-calculates positions and then just checks against those values, so the issue won't be the ScrollTriggers themselves. ☺️
from the docs...
Awesome, just watched your little video on it. Great work, I've been waiting for GSAP to natively make a smooth scroll library. Have not been on the forums in a few years and super happy to see you guys have finally done it! Going to give this a run now.
Also great demonstration, super clear.
-
1
-
-
4 minutes ago, Cassie said:
Hey there!
Some of your images being around a MB in size would be my first guess. The site seems to be perfectly smooth on my device though.
If you're struggling with IOS, it may be worth trying out ScrollSmoother to see if it works for your use case any better?
https://greensock.com/scrollsmoother/I'll try the smooth scroller as well
-
1
-
-
Thanks for the reply! Awesome, I'll try scaling those down.
Does GSAP natively kill RAF loops which are not in view? EG are all the scrollers updating and requesting info all the time or are they just doing it upon triggers?
-
Hi all, I just wondered the best practices when using Scrolltrigger and any smooth scroll library?
I appreciate you guys want isolated code examples but due to the nature of this problem being sitewide I can't really do that. I'd really appreciate a bit of insight on how to make scrolling interactions less laggy in general. All I'm really doing is using a bunch of scroll triggers, nothing complicated and under 250 lines of code so really it should not be lagging. I don't need someone to fully audit the code or anything, rather I'd appreciate if someone could just have a quick look in the inspector and see if there's anything standing out that's causing my issues.
I've come up with a few things that could be causing the problem.
- Image size
- RAF triggering too much
- Not using dynamic scroll triggers with "for each" etc
Here's my site i'm using scrolltrigger x asscroll -
-
26 minutes ago, GreenSock said:
I don't really have time at the moment to dissect all the code/logic and fix it for you, but from a cursory glance it looks like issues with how you're handling the whole last/current/next data. Your slideIt() function doesn't accept any parameters, yet you're feeding 3 parameters to it from your next() and prev() methods. Furthermore, that function looks like it's only considering "last" and "current" values (which you're setting in next()), but not "next" (which you're setting in prev()).
Perhaps you just need to normalize things on "current" and "next".
In short, I'm pretty sure it's a logic issue in the way you're handling last/current/next and has nothing to do with GSAP or zIndex
Ah lord, that was the one I edited & left for later, whoops! Swapped the vars back now lol. Good shout on the normalize though, going to give that a try.
Cheers!
-
7 hours ago, sashaikevich said:
What do you think would be the best approach?
Personally I'd convert everything to beizer data using morph SVG & then do something like this. Rinse & repeat for as many "orbits" as you need. pathDataToBezier can convert all of them together in one go as well.
See the Pen jJaPLx?editors=1010 by smallio (@smallio) on CodePen
Hope it helps
-
2
-
-
Hi all,
Trying to recreate a timeline slider @jesper.landberg made for some constructor practice.
Nearly finished, however I can't seem to get the z-index/xPercent right for the back animation. I'm wondering if anyone knows how to keep the transition the same when we go back & keep the slide underneath like when we go forward?
Really need to get better with slide logic, for sure my weakest point.
Cheers!
See the Pen XGeQyY?editors=0110 by smallio (@smallio) on CodePen
-
34 minutes ago, popflier said:
However, since it's been resurrected
perhaps I can ask a few more questions so that I could possibly get this thing to work? (please!)
let can of worms = opened ?
ScrollSmoother and ScrollTo conflict with anchor links while scrolling
in GSAP
Posted
Hello old friend @PointC,
How would you achieve this when the href is on another page?
EG navigate from Blog page to href on Home page and have it scroll to the href like in your example.
Stumped on this one for some reason.
Cheers,
Smallio