Search the Community

Hello, I'm new to GSAP and JS in general, but I wanted to add animation to my burger menu on click. let typeSplit = new SplitType(".mobile-menu-page-container", { types: "lines, words, chars", tagName: "span", }); // plain JavaScript version document.querySelector(".burger-wrap").addEventListener("click", function () { setTimeout(function() { gsap.from(".mobile-menu-page-txt .char", { y: "110%", opacity: 1, rotationZ: "10", duration: 0.2, ease: "power1.out", stagger: 0.05, }); }, 200); }); Everything works on the first click, but if I open and close the menu, it looks strange. What can I do? Thanks RPReplay_Final1706268273.mp4

Hello, I'm new to GSAP, so I apologize in advance if my problem could have been solved simply. I have an HTML structure that looks like this: <div class="chapter chapter-1"> <div class="page page-1"> <div class="sheet"> <p class="storyline">Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci commodi optio fugiat eum porro provident necessitatibus vitae. Quis, doloremque inventore recusandae aperiam dolore adipisci blanditiis est dolorum architecto dicta quasi?</p> <i class="fa-solid fa-circle-left reading-btn previous-chapter"></i> <i class="fa-solid fa-circle-chevron-right reading-btn next-page"></i> </div> </div> Of course, there are several chapters (chapter-1, chapter-2, ...) which themselves have several pages (page-1, page-2, ...). I'd like to run a SplitType animation on my <p class="storyline"> each time it or its parent <div class="sheet"> enters the viewport. To achieve this, I wrote the following code: for (let indexPage = 0; indexPage < storyLines.length; indexPage++) { const numPage = indexPage + 1; console.log('Chapter ' + numChapter); console.log('Page ' + numPage); // I used this console.log only to make sure I had the right chapter and page number const line = new SplitType(`.chapter-${numChapter} .page-${numPage} .storyline`, { types: 'chars' }); gsap.fromTo(`.chapter-${numChapter} .page-${numPage} .char`, { y: 100, opacity: 0 }, { y: 0, opacity: 1, stagger: 0.1, duration: 3, delay: 3, ease: 'power4.out', scrollTrigger: { trigger: `.chapter-${numChapter} .page-${numPage} .storyline`, toggleActions: "play none reverse none" } } ) } This loop is itself in another loop: for (let indexChapter = 0; indexChapter < chapters.length; indexChapter++) { const numChapter = indexChapter + 1; I've encountered two main problems: either the animations don't trigger, or they trigger at the same time, so by the time I got to the next page, the animation had already begun. Thank you in advance, my code is not clean, I apologize.

Hey guys, Hoping someone can help me out. My Problem: Split text is being applied before my font has actually rendered in the browser which results in abnormally large letter spacing. My assumption is the fallback font is being used for the split text calculation prior to my imported fonts being rendered in the browser (thus, when my fonts are rendered, they're not formatted correctly). I'm 90% sure this is the cause of my issue, although let me know me if otherwise! The issue occurs about 50% of the time (the other 50% renders as expected) and at the moment it's only happening on IOS Safari / Chrome (so far from what I've tested) which makes it hard to debug. I've also tested and found this problem occurs more frequently when my font loads slower than usual. The problematic font is loaded from AWS, although I've also had the same problem loading fonts from Google. I've seen questions regarding this issue thrown around a few times, although I couldn't seem to find a robust / official solution (mostly hacks or the use of the Webfontloader (https://github.com/typekit/webfontloader) which looks great, but I can't seem to get working). Here's an example of what I'm seeing: Good: Bad: Has anyone got this figured out? Thanks guys! Ryan

I am using Split Text (v.0.5.8) to create a simple line by line animation which works awesome. I've run into an IE11 issue when I use^{tags in the string they get broken out into their own div which is set to be a block element. So my initial div: <div id="txt">I can't wait <br>until we drop IE11<sup style='font-size:50%;'>®}!</div> <script> var t1 = new SplitText(document.getElementById("txt"), {type:"lines", linesClass: "line-span", reduceWhiteSpace:false}); </script> will print 2 divs in most browsers as expected. <div class="line-span" style="text-align: left; display: block; visibility: inherit; position: relative; opacity: 1;">I can't wait </div> <div class="line-span" style="text-align: left; display: block; visibility: inherit; position: relative; opacity: 1;">until we drop IE11®!</div> But in IE11 it buts the <sup> into extra an div and prints 4 divs. <div class="line-span" style="text-align: left; display: block; visibility: inherit; position: relative; opacity: 1;">I can't wait </div> <div class="line-span" style="text-align: left; display: block; visibility: inherit; position: relative; opacity: 1;">until we drop IE11</div> <div class="line-span" style="text-align: left; display: block; visibility: inherit; position: relative; opacity: 1;">®</div> <div class="line-span" style="text-align: left; display: block; visibility: inherit; position: relative; opacity: 1;">!</div> I saw Carl's video addressing the issue and tried the patch of adding display:inline-block; into the tag fixes the issue in IE11, but creates the same issue in every browser.

Hello everyone, how can I animate with GSAP a gradient text using the css code below? Or some other way. background: linear-gradient(to right,#3b1c52 50%,#b51a84 80%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;

Hello, I guess my problem wouldn't be such to an experienced person, however, since I'm not good at JS at all, I have this case where I am applying split text effect on two separate h1 tags and when I try to apply allDone on both of them, it doesn't work. When I apply allDone on the first h1, the second h1 doesn't get affected by the split text effect at all. When I apply allDone on the second h1 tag it all works but, of course, I would also need allDone applied to the first h1 as well. Also, defining the function for allDone two times doesn't work as well... Thank you! var tl = new TimelineLite, mySplitText = new SplitText(".is-returning h1.line-1"), chars = mySplitText.chars; TweenLite.set(".is-returning h1.line-1", {perspective:400}); tl.staggerFrom(chars, 1.2, {opacity:0, scale:0, y:120, rotationX:180, transformOrigin:"0% 50% -50", ease:Back.easeOut, delay:6.8}, 0.01, "+=0"); /*I want to place an allDone parameter here too but it doesn't work this way*/ var tl = new TimelineLite, mySplitText = new SplitText(".is-returning h1.line-2"), chars = mySplitText.chars; TweenLite.set(".is-returning h1.line-2", {perspective:400}); tl.staggerFrom(chars, 1.2, {opacity:0, scale:0, y:120, rotationX:180, transformOrigin:"0% 50% -50", ease:Back.easeOut, delay:9.8}, 0.01, "+=0", allDone); function allDone(){ mySplitText.revert(); }

Hi there, I'm trying to use greensock to recreate an effect I see everywhere. Here is an example of it. http://www.jennyjohannesson.com/klm I'm referring to how the Bluey text and body appears on the portfolio page. I would like to have the text appear from the baseline. I can re-create this effect using a wrapper with visible set to off but ideally I would not use a wrapper. It seems like there should be a straightforward way of pulling this off but I'm not sure how to do it. Thanks in advance for your help.

Hi, I was trying to analyze why this Split Text seems to shake in chrome. This is from the SplitText Collection in Codepen for GSAP. Why is this?

I'm having to split and animate text that contains special characters and markup that the SplitText utility doesn't seem to handle. I've included a sample of the markup I'm dealing with and it contains an example of the types of characters that SplitText doesn't recognize (flames and apple chars, plus color markup). Since I'm pretty new to all of this I'm hoping there is an easy fix to my dilemma that I just haven't learned yet. I don't know if these are UTF-8 characters or what. I hope the characters will continue to show after I've posted them here. They are displayed properly by the browsers just not after I've split them. Any advice would be greatly appreciated. — George <div id="quote">This Friday

Hi guys, I am working on a portfolio site (http://werkstatt.fuelthemes.net/portfolio/paloma-rincon) On the top right, there is a button which brings up a box, and then animates the splitted text. However, since the box is hidden on first load, split text does not accurately work.

Hi there Does anyone know how to adjust the font size within the split text GSAP? Any help would be appreciated. Thanks Dan

http://codepen.io/redag555/pen/MKBLmE Trying to animate line 3 (eventually all 3 lines) but can't get it to work - what am I missing? Thanks. r

I can't seem to get this working. I am trying to scale a textfield (by letter) from the center, but whatever I change regOffsetY to, it always scales from the top left corner. What am I doing wrong? Thank you. Peter test.fla.zip