en en en en en en en en en en en en en en en en fa en en fr hbs_lat en en en es en en en ms en de en fr en en en ca en en en en en en en en en en en fr en en en en en en en en en en en en en en fr en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en pt nb en en pt en en en en en en en en en en fa nb en en fa nb ru en ms en en en en fr en en en en en fr en en en nl en es en en en it en en en en en en en fr cv es tr es en en en en ms en en en en en en fr en hbs_lat en en en en en en en fr cv es tr es en en en en de en en en ca en en en en en
samuelhigginson started following Animate based on Cursors distance from Element , GSAP Random function gets called twice? , Missing something obvious with MorphSVG? and 1 other April 12
samuelhigginson posted a topic in GSAP
hello! 👋 I'm trying to avoid the elements jumping to their 'new' random location (not the FOUC) on Scroll Start. I think it's something to do with the random function getting called on load, and then again when the playhead reaches the function in the timeline? Maybe something to do with the .from as well? Whatever it is, I gave it a good go and I'm stumped. If anyone can give us a hand, that'd be awesome.
samuelhigginson replied to samuelhigginson's topic in GSAP
Oh yeah! What's that guy doing way down there.. Must have gooped on the conversion somehow. https://codepen.io/samuelhigginson/full/YzqqOvK Thanks for the help fellas! 🤝
Missing something obvious with MorphSVG?
samuelhigginson replied to samuelhigginson's topic in GSAP
Well hot dog. Right under my nose. Thanks a bunch Craig. 🤝
Missing something obvious with MorphSVG?
samuelhigginson posted a topic in GSAP
Hey there 👋 Not much to this one really.. Just getting started and with MorphSVG and I can't figure out what I'm missing. Any help pointing out the obvious would be great. Cheers
Duplicate Properties Stopping Timeline
samuelhigginson posted a topic in GSAP
Hey there 👋 This is my first time using Timeline, so I'm sure I must be missing something obvious. What I'm trying to do is start the record off slow, let it spin baby spin, and then bring it to a gentle stop with some more easing tacked on the end. But ignorance has stopped me in my tracks, yet again. Any help getting this party started would be greatly appreciated. Cheers!
samuelhigginson changed their profile photo July 17, 2020
Animate based on Cursors distance from Element
samuelhigginson posted a topic in GSAP
Hey there 👋 I have no real idea of what I'm doing when it comes to javascript, but I'm totally hooked on the interactions and animations that are possible when using it. And today I discovered GSAP, which seems to tie all that stuff together very nicely. So here I am asking for help, trying to implement GSAP into my most recent 'Project'. What I'm trying to do is replicate an interaction on the Wieden + Kennedy home page. The closer your cursor gets to the featured project title (lower left of the screen) the more it's underline grows. When the cursor reaches the project title, the underline reaches it's full length, and underlines the project title. I'll also point out that it doesn't matter where your cursor is hovered on that featured project title, the underline stays at it's maximum value. (Something I've been having trouble figuring out) [It's definitely easier to see this in action than to read my crappy explanation of it, so it might be worth clicking the link up there] Phewf. After piecing together sections of code from around the web, and before I discovered GSAP. This is what I had. https://codepen.io/samuelhigginson/pen/MWKBjJm It's.. kind of something that works? But there are a couple of things that aren't quite right. My line starts to get going as soon as the cursor enters the viewport. On W+K's page there seems to be some kind of 'Trigger Div' which initiates the interaction. My line only reaches 100% when the cursor is exactly in the centre of the Project Title. W+K have a much more satisfying 'Hover anywhere on the Project Title' thing going on. If the window resizes, the distances change and things go wrong. And the final difference I can spot, and what ultimately led me to GSAP. That delicious easing. My lines width is a scaled replication of the cursors distance from the Project Title. What W+K have, is a buttery smooth, slippery sliming line. And I'm all about that. So I got to googling and came across this post, here on the GreenSock forum. I noticed some similarities between the solution offered there and what I had going on, so I forked the pen and started trying to merge that solution with my own. And I ended up with this. https://codepen.io/samuelhigginson/pen/LYGgaab?editors=1111 Not great. But.. not totally disgusting? I know I've probably over complicated this massively, and my approach and calculations are probably way off. But this is all my perfectly smooth brain can manage, for now. So I'm reaching out to you people with the GreenSocks and asking for help. Anything you can suggest to get this little line dancing would be greatly appreciated. Cheers.
“Any time I've struggled to achieve a complex animation in CSS alone, I've never regretted using @greensock 's GSAP. After all these years, and impressive competitors, it's still Best In Class.”
“No other animation library is as intuitive, rigorous, conceptually simple and well curated as GreenSock’s.”
“This is by far the fastest and most active community I've ever seen for getting personalized answers to questions. Only with the help of GSAP and this forum was I able to accomplish my project.”
“GSAP should be the default when it comes to Javascript animations. It should literally be part of the next Javascript update.”
“Honestly think without GSAP, I would have changed careers by now; it's that good.”
“I think I love GreenSock as much as bacon.”
“GSAP makes my job fun, because it allows me to focus on creating rich, engaging web experiences, while GSAP handles much of the implementation details behind the scenes.”
“Reading through the GreenSock docs; been amazed like 14 times so far! How can a library be SO complete? Been using that for about 2 years now but man... This the first time I feel this way about a library.”
“+1 to GreenSock. It’s just one of the deepest and most reliable javascript libraries I’ve ever used”
Sign Up For Our Newsletter
Get the latest updates on GreenSock products, exclusive offers, and more right in your inbox.
Your information will always be kept confidential.
Thanks for signing up!
Now you'll begin receiving the latest GreenSock updates, exclusive offers, and more right in your inbox. Welcome aboard.