ponzo

I have the same problem using font-display: auto; is the default from typotheque.com which results into different linebreaks everytime. I followed OSUblake's direction to load the fonts first, if browsers not support this API then the text is not split and animated, but still visible which is enough document.fonts.ready.then((fontFaceSet) => { const childSplit = new SplitText(".p-line", { type: "lines" }); gsap.set(childSplit.lines, { opacity: 0 }); ScrollTrigger.batch(childSplit.lines, { onEnter: (batch) => { gsap.set(batch, { opacity: 0, yPercent: 100 }); gsap.to(batch, { yPercent: 5, duration: 1, opacity: 1, ease: "power4", stagger: 0.2, }); }, onLeaveBack: (batch) => gsap.to(batch, { opacity: 0, yPercent: 100 }), start: "bottom 95%", }); });

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

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?