ponzo Posted May 21, 2021 Share Posted May 21, 2021 Hello, I have doubts on my approach to animate different elements in my Vue project on scroll. When i mount my page layout of my vueproject I trigger different types of animations this.setAnimatTextlines(); this.setAnimateCards(); this.setAnimateDates(); Which results in lot's of similar functions to catch up all of the elements setAnimateDates() { gsap.registerPlugin(ScrollTrigger); gsap.set(".dates", { opacity: 0, y: -100, scale: 0.9, }); ScrollTrigger.batch(".dates", { onEnter: (batch) => { batch.forEach((card, index) => gsap.to(card, { opacity: 1, y: 0, scale: 1, stagger: 0.5, delay: index * 0.3, }) ); }, }); }, However, i'm not sure if this is a best practice to use multiple ScrollTrigger.batch etc I'm very used to use for example 'scroll-out' js which just adds a data-attribute to the element which enters or leaves the viewport. The rest I solve with plain css .datas[scroll-data="in"]{ transition:1s ease all; } I ended up which using both scroll-out and ScrollTrigger. Is it possible with ScrollTrigger to just add data attributes so I can solve the more easy animations with plain css? Link to comment Share on other sites More sharing options...
OSUblake Posted May 21, 2021 Share Posted May 21, 2021 Welcome to the forums! 😀 So what's the issue here? You just want to use CSS transitions? If that's the case, you can just use toggleClass. 5 hours ago, ponzo said: Is it possible with ScrollTrigger to just add data attributes GSAP won't do that, but you can use one of ScrollTrigger's callbacks to add the attribute. 1 Link to comment Share on other sites More sharing options...
GreenSock Posted May 21, 2021 Share Posted May 21, 2021 Yep, Blake is exactly right. The toggleClass is probably easiest: gsap.utils.toArray(".dates").forEach(el => { ScrollTrigger.create({ trigger: el, toggleClass: "in-viewport" }); }); Or if you want to do the same technique as you're used to: gsap.utils.toArray("[scroll-data]").forEach(el => { ScrollTrigger.create({ trigger: el, onToggle: self => el.setAttribute("scroll-data", self.isActive ? "in" : "out") }); }); Lots of options. 3 Link to comment Share on other sites More sharing options...
ponzo Posted May 25, 2021 Author Share Posted May 25, 2021 Hello, This example is a very practical method for me to unleash some simple css animations on elements when items entering the viewport: gsap.utils.toArray("[scroll-data]").forEach(el => { ScrollTrigger.create({ trigger: el, onToggle: self => el.setAttribute("scroll-data", self.isActive ? "in" : "out") }); thank your for that. I'm very new to Gsap and the documentation is a bit overwhelming, while finding CodePen examples within the forums consumes time. It would be super helpful if the greensap docs would have a section like 'quick start guides' which combines some practical examples from the learning center, the forums or documentation as structured step by step info- for example to build a portfolio website with greensap. The guides could contain:1. Installing Gsap (is already available within the docs) 2. Animating navigations and sticky headers (scrolltrigger) 3. A homepage with storytelling (scrolltrigger + timeline) 4. Animate grids with multiple elements (scrolltrigger with batch or utils.ToArray?) 5. Animate typography (splittext plugin) 6. Create 3d animations with threejs and gsap 7. Combine Gsap with CSS transitions 8. Final notes and best practices Just like the quick start guide of strapi CMS, which connects the most practical dots to startup and lift off https://strapi.io/documentation/developer-docs/latest/getting-started/quick-start.html Thank you Link to comment Share on other sites More sharing options...
Cassie Posted May 25, 2021 Share Posted May 25, 2021 We have a getting started guide here - Have you taken a look through that? We're going to be looking at different possible flows people might want when getting started - but I think the difficulty with a list like you've proposed is that people use GSAP for so many different things! It would be great to chat some about why you found the documentation overwhelming if you have time? Specifics will really help us make it easier for other folks. ☺️ 3 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now