Black Ducas

@mikel thanks, I understand but applying a letter-spacing I get too much space between the chars. I can't use this solution. Any other ideas?

Hi, check the below Codepen on Safari (desktop and mobile) and look at the "f" characters: you'll see that they're cut off until the animation ends (I just took the SplitText demo to make it more clear) causing a bad jump making it buggy. Is this maybe a Gsap bug? Any way to solve it? Thanks https://codepen.io/gooogooo/pen/VwrgMJR

Hi @Cassie I wanted to keep this question as simple as possibile. animateTitle function was just an example, it contains just a very simple gsap.from() tween like a fade in. It is a function that I have to use also in other contexts, like calling it outside a timeline. export const animateTitle = (element) => { gsap.from(element, {...}); // Fade in animation on the passed element }

Hi friends, is there a way to chain functions in the timeline, like this? gsap.timeline() .add( animateTitle('.hero--about h1') ) .add( animateImage('.hero--about img'), '<5' ) The above code is not working for two reasons: 1) the 2nd function start at the same time as the 1st one; 2) position '<5' doesn't work. Is there maybe another GSAP function for this? Thanks

Hi @OSUblake thanks for this awesome codepen. I noticed that it's bugged on Firefox, I attach a video showing that. Is it a bug of Draggable plugin? Thanks Kapture 2022-02-14 at 12.37.15.mp4

Hi I'm trying to create an infinite marquee animation on images, similar to the one you could see on this site It seems that ModifiersPlugin is the way. You can see here my code: https://codepen.io/gooogooo/pen/wvPBEaz but it doesn't work as expected and I don't get where I'm wrong, any helps?

Hi @Cassie Thanks for the help. I already saw that codepen but the animation I have to do is completely different. I have these bars (that are separated elements) that should animate changing their height randomly but keeping the oval shapes. My thought brought me to see this animation as animating separately those bars but I really don't know if it makes sense! Any idea? Here is a codepen with the SVG so you can see what I mean: https://codepen.io/gooogooo/pen/ZEXKKGX Thanks

Hi friends I need your help. I need to create an animated waveform, this one: There's some flexibility so the 3 shape can be symmetric respect the axis X (like the 3 red oval I draw on it). The little bars that make up the shapes have the height animated randomly but not too much so we can recognize the oval shapes. (In a step 2: we need to do an animated transition the reduce the amplitude of the shapes). I know I should post a minimal codepen but I really have some hard time to get what's the way to do it. Please, someone that give me an idea? Thanks

Hi, just a variation on this question. Say I've this code and I need to animate the title "Title" <section> <header> <div class="container"> <h1>Title</h1> </div> </header> <div class="container"> Content... </div> </section> Is it more efficient apply the animation on <header> tag or <h1> tag? Consider that the element could be much more nested than that.

@Stefano Monteiro Yes, that was clear. I'd like to know if there's a way to avoid to specify each classes.

Hi @OSUblake I've a code like this: gsap.utils.toArray("" + ".js-class-1, .js-class-1-wrap > *," + ".js-class-2, .js-class-2-wrap > *") // and so on, a long list of classes/css selectors .forEach(el => { gsap.from(el, { scrollTrigger: { trigger: el, once: true, }, y: animUpY, autoAlpha: 0, }); }); and I obviously get in console a lot of "not found" warnings because some classes are on a page, some others on other pages, and so on. What is the best practice in gsap to check them with an if? This technique could decrease performance? (and for this reason is better shutdown warnings in gsap.config?) Also, any advice about a better refactoring of my code is welcome Thanks

@OSUblake You're the one, that's it! 🤙 Well, that was tricky. Below the whole code so that could be helpful for someone. axios.post(ajaxurl, form_data) .then(function (response) { // This keeps the *same* html to inject and animate let template = document.createElement("template"); template.innerHTML = response.data.html; let cards = template.content.querySelectorAll(".card"); // Get elements to animate // Inject HTML in the DOM // Note: DON'T use insertAdjacentHTML to inject, it duplicates html containerEl.append(template.content); // ScrollTrigger animation ScrollTrigger.batch(cards, { onEnter: elements => { gsap.from(elements, { autoAlpha: 0, y: 60, stagger: 0.15 }); }, once: true, }); })

Tried but it's the same

Tried this with no luck (same as before, ScrollTrigger doesn't trigger the animation on new items) axios.post(ajaxurl, form_data) .then(function (response) { // Parse let parser = new DOMParser(); let htmlDoc = parser.parseFromString(response.data.html, 'text/html'); let newItems = htmlDoc.querySelectorAll(".card"); // Inject HTML as string // <li><div class="card">...</div></li> <li><div class="card">...</div></li> ... containerEl.insertAdjacentHTML('beforeend', htmlDoc.body.innerHTML); // ScrollTrigger ScrollTrigger.batch(gsap.utils.toArray(newItems), { onEnter: elements => { gsap.from(elements, { autoAlpha: 0, y: 60, stagger: 0.15 }); }, once: true, }); })

Hi @ZachSaucier and @wpsoul I need to do that same thing you do but with pure Javascript not Jquery. Here's my code but ScrollTrigger doesn't get the new items injected: axios.post(ajaxurl, form_data) .then(function (response) { // Inject HTML from Ajax // <li><div class="card">...</div></li> <li><div class="card">...</div></li> ... containerEl.insertAdjacentHTML('beforeend', response.data.html); let parser = new DOMParser(); let htmlDoc = parser.parseFromString(response.data.html, 'text/html'); let newItems = htmlDoc.querySelectorAll(".card"); ScrollTrigger.batch(gsap.utils.toArray(newItems), { onEnter: elements => { gsap.from(elements, { autoAlpha: 0, y: 60, stagger: 0.15 }); }, once: true, }); }) Any idea? Thanks