Help needed with creating similar effect as webflow template

[htothep]

Hi everybody!

 

I'm building a simple website in html, js(also jquery) and CSS. No additional frameworks. 

Right now I'm using LocomotiveScroll for some effects but these effects don't work on mobile except when i enable smoothscroll for mobile. So I'm searching for a different plugin to let me have the same functionality as LocomotiveScroll and came across ScrollTrigger and Smoothscroll from Greensock. I'm trying to create the same effect(text transforms on scroll) as this website template from webflow: https://okocha.webflow.io/. But don't know how to do this with scrolltrigger.

Does somebody has an example or can help me out to achieve these effects?

[GSAP Helper]

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "how do I recreate this cool effect I saw on another site?" tutorials. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations.  

 

If you're looking for ScrollTrigger effects, I'd recommend looking at the demos at https://greensock.com/st-demos and https://codepen.io/collection/DkvGzg and https://codepen.io/collection/AEbkkJ - you may be able to use one of those as a jumping-off point. 

 

You are welcome to post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. 

 

Otherwise, if you've got a GSAP-specific question just post that here along with a minimal demo and we'd be happy to take a look. 

[Cassie]

GSAP has a bigger learning curve than locomotive. Locomotive provides a few out-of-the-box effects, whereas GSAP is a whole animation system that allows you to do anything you can think of.

You'll need to dig into tweens, timelines and the position parameter to start.

Here's an idea of how you can acheive a text effect like locomotive

See the Pen BaGBdQb by GreenSock (@GreenSock) on CodePen

 

But if I were you I'd start here
 

Good luck!

[htothep]

@Cassie This is exactly what I needed. I don't know if it's the best practice but I will only use it for mobile and only the text animation. Your example is exactly what I needed and works great. Is there a way to have 1 function for multiple elements? like an .each function or something?

[Cassie]

Yep, it's just JavaScript, you can do anything you like!

 

let items = gsap.utils.toArray('.myClass')

items.forEach((item) => {
  gsap.to(item, {
  xPercent: 100,
  x: () => -1 * window.innerWidth,
  ease: 'none',
  scrollTrigger: {
    trigger: item,
    scrub: 1,
    markers: true,
    invalidateOnRefresh: true,
  }
})
})

[htothep]

@CassieLife saver! thank you so much