animation in jasper ai website
I want to create the scroll animation on jasper Ai website for a client @Web Bae please what’s the best way to approach this
12 Replies
@Web Bae
lol
no need to yell bro! 🤣
there's a lot of scroll animation going on here.
which one?
Lolz 😂
This section
I already did something nice with gsap scrollTrigger. I’m just trying to get comfortable with with gsap
So I’m still mixing it with Webflow native animation 😊
What I’ve been trying to get is the scroll snap that happen immediately you enter the section
@Web Bae
Hey @Vhibezfx I would tackle this with GSAP ScrollTrigger - probably using the onToggle or onEnter and onLeaveBack event triggers.
I don't have a video specifically on this but I do cover some similar concepts here: https://www.youtube.com/watch?v=d3V-G0GfovQ
Web Bae
YouTube
Infinite Scaling Smooth Scroll Animation w/ Lenis and GSAP
Bureau DAM's hero section features a delightful infinite scaling smooth scroll animation that alternates between an SVG of it's name and portfolio carousel. In this video I'll show you how to create the same effect in Webflow with a little bit of Custom Code in Javascript. We'll leverage the power of Lenis Smooth Scroll with it's infinite scroll...
I didn't see any snapping behavior on the site but I'd go for swiper.js if doing. You can combine swiper with GSAP as well with the Swiper event callbacks.
Here's a video on scroll snapping infinite swiper: https://www.youtube.com/watch?v=iUP_vMehLUg
Web Bae
YouTube
🔝 Infinite Vertical Scroll-Snapping Carousel with Swiper.js
Let's explore how to build a vertical carousel in Webflow with Swiper.js. This slider will snap to the user's scroll and loop infinitely. We'll also have a look at how we can leverage the vast Events API with CSS transitions and GSAP to animate items as they slide into view.
// CLONE IT
👯♀️ https://webflow.grsm.io/cloneable-is-bae?sub1=swiper...
note that this example doesn't have sections above and below. It can be really tricky / difficult UI to scroll into a snapping section from a "normal scroll" section
I cover that here: https://www.youtube.com/live/0wUdwhDSZZo?feature=share
Thanks really appreciate your time
I have already implemented the scroll with onEnter and onLeave with gsap
What’s remaining for me to figure out is:
In that jasper site when a small portion of the section is visible, the whole section scrolls and it’s fixed to the screen.
That’s what I’m trying to figure out.
I’m check all the resources you attached if I can come up with something
Thanks 😊