GSAP in Webflow SUPAFAST
HTML-код
- Опубликовано: 1 июл 2024
- A blitz tour of getting to know GSAP. Many more tutorials to come. Let me know what you want to cover!
Brought to you by FlowSt8.dev - The unlimited Webflow Development Service
Get started with Webflow NOW! webflow.grsm.io/vju2g2zhpv53
-
Buy merch: flowst8.dev/store
Join the community: / 1737357986903753004
Support my content: buymeacoffee.com/fakesamgregory
Learn to become a Full Stack Agency: thefullstackagency.xyz/
Services I Love
Domain Names: namecheap.pxf.io/c/3510278/38...
Hosting: www.hostg.xyz/aff_c?offer_id=...
Online Storage ($200 credit): m.do.co/c/9beb563908a1
Online Storage ($100 credit): www.vultr.com/?ref=9381598-8H
-
Twitter: @0x5am5
-
--------------------------
⏰ Timestamps
--------------------------
00:00 - Intro
00:47 - Installing GSAP
01:56 - GSAP Anatomy (to, from, fromTo
04:52 - Timelines
07:03 - Staggering animiations
09:51 - ScrollTrigger
13:38 - Easing
My Gear (affiliate)
Sony A7 III: amzn.to/427iMbS
Sony 16-35mm: amzn.to/3Ehfvxi
VIJIM Video Light: amzn.to/3N0XdFp
Hollyland Mark M1: amzn.to/3MIZmUW
Macbook Pro M1 Pro: amzn.to/3oEVbS0
iPad Pro 2018: amzn.to/3AxJWNN
Magic Keyboard: amzn.to/421B26P
Travel Laptop Stand: amzn.to/3MDRx2Q
Logitech MX Vertical: amzn.to/3oCg1Bz
My Books
The Full Stack Agency: thefullstackagency.xyz/books/...
Lingo: Agile: thefullstackagency.gumroad.co...
Lingo: Startup: thefullstackagency.gumroad.co...
#Webflow #gsap #immersivewebsites
![Megan Thee Stallion - Otaku Hot Girl [Official Audio]](http://i.ytimg.com/vi/USxIYOaIpig/mqdefault.jpg)
Do you wanna see more GSAP?
Yes! I would also love to see how you account for users who don't have javascript enabled when there's a decent amount of GSAP on a webflow page!
Well isn't it just your lucky day - ruclips.net/video/7-ra0sN-UFc/видео.html
GSAP is the most important tool to know alongside Webflow IMO
More GSAP please!
Nice intro to GSAP, have used it many times but not all the time so this is a useful video even to folks coming back to it and using it again.
Glad it was helpful! Yeah, I think this covers those basic and commonly used methods. Any suggestions on another video? Let me know!
Yea I liked your scroll trigger explanation, i always got caught up with that the first few times using it. I think most people do.
As for suggestions, keeping with the animation theme you could maybe go over anime.js or three.js?
Using API’s in Webflow always seems to default to using something like Wized. How about showing folks how to use Lambda functions to fetch external data? Could go over things it solves such as exposing your API keys and CORS issues when not used etc.
Lucky for you I've covered Webflow's API (including CORS), API keys and Three.js. Just search my content. As for anime.js. I've not much experience using it and i'm not even sure how popular it is but will be mindful of it. I was thinking more in terms of GSAP concepts.
After watching this and your previous video of setting up VSCode, it really makes me wonder why anyone would use Webflow in the first place if they are writing code like this as you're basically replacing everything Webflow was designed to take away from the process. What would you say is the advantage of doing this when we already have animations and scroll triggers native to Webflow? Sorry of I've missed something! Another great video though, very useful, thanks.
We’re not replacing everything, we’re just replacing the JavaScript. The experience is just awful in Webflow and may personally think the interactions are awful.
Webflow speeds up many aspects. HTML, styling, servers, CMS and gives a great experience to all those things. The VScode/GSAP workflows are just making up for where it falls short. Hope this helps. Ps. GSAP can do what interactions can and then so much more. It’s just better and easier imo.
More gsap stuff on webflow pls
Very interesting, in relation to Page Load Times is if faster than the Webflow default animations?
Haven’t tested. Probably not but the difference would be negligible
@@webflowandcode Okay thanks for the reply!
What setup are you using to connect your IDE to webflow?
I mention this in the video. Linked up in the corner!