Search the Community

Hey guys, I'm a Webflow designer developer who keeps running into issues implementing split type - every time I add it to my project, it ends up looking a mess for some reason. 🥲 I've attached an image (down below) of the kind of problems I have been getting. I'll also attach my code - I have tried so many variations now, honestly it's melting my brain! Here is the the timeline I want to add the text animation to - I want the text to pop up line by line when the star begins to spin (which you can see in the timeline below). It should be triggered at the same point. (pictured is #star-1) let tl3 = gsap.timeline({ scrollTrigger: { trigger: '#services', start: 'top 20%', // trigger when #about comes 30% into view end: 'bottom 85%', // set the end point to be 100% of the trigger's height scrub: true, // enable scrubbing markers: true, toggleActions: 'play none none reset', // play the animation when triggered onUpdate: (self) => { if (self.progress >= 0.12 && !self.spun) { gsap.to('#star-1', { rotation: "+=720", duration: 1, ease: 'power4.out' // OutQuart easing }); self.spun = true; } else if (self.progress < 0.12 && self.spun) { self.spun = false; // Reset the flag when progress goes below 12% } // Spin #star-2 at 50% progress if (self.progress >= 0.27 && !self.spun2) { gsap.to('#star-2', { rotation: "+=720", duration: 1, ease: 'power4.out' // OutQuart easing }); self.spun2 = true; // } else if (self.progress < 0.27 && self.spun2) { self.spun2 = false; // Reset the flag when progress goes below 50% } // Spin #star-3 at 70% progress if (self.progress >= 0.53 && !self.spun3) { gsap.to('#star-3', { rotation: "+=720", duration: 1, ease: 'power4.out' // OutQuart easing }); self.spun3 = true; // } else if (self.progress < 0.53 && self.spun3) { self.spun3 = false; // Reset the flag when progress goes below 70% } } } }); tl3.to('.animation-object3', { motionPath: { path: '#path3', align: '#path3', alignOrigin: [0.5, 0.8], autoRotate: true, ease: 'easeInCirc', delay: 0, }, }); // Add an event listener to the window resize event window.addEventListener('resize', function() { // Invalidate the motion path data for each timeline tl1.invalidate(); tl2.invalidate(); tl3.invalidate(); ScrollTrigger.refresh(); }); Here is an example of the kind of staggered text animation I want to add: let typeSplit = new SplitType('[animate]', { types: 'lines, words, chars', tagName: 'span' }) gsap.from('[animate] .line', { y: '100%', opacity: 0, duration: 0.5, ease: 'power1.out', stagger: 0.1, }) Thank you for any help or guidance! 😊

I just got my feet wet with Tweenlite, and created a simple 300x250 display banner. It has a single image and a few lines of type that tween in and out. I was done and saw my file size was about 27kb. A typical banner that size I can get to about 12-15kb, but without the buttery motion GSAP has... I ran an output report and pasted it below... It looks like the 16,000 AS bytes took up a big chunk of the swf. Since Im just doing basic banners, should I stick to Flash's native tweening instead? I also pasted my Tweenlite code below the report, if there's something Im doing that could be bloating the file. I get the possibilities of GSAP being powerful, but I am not at the level currently to use it as a go between between native/timeline tweens and GSAP code. Any thoughts? 300x250 test.swf Movie Report ------------------------------ Metadata -------- Bytes Value ---------- ----- 939 <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"><rdf:Description rdf:about="" xmlns:xmp="http://ns.adobe.com/xap/1.0/"> <xmp:CreatorTool>Adobe Flash Professional CS6 - build 481</xmp:CreatorTool> <xmp:CreateDate>2014-11-03T09:50:24-05:00</xmp:CreateDate> <xmp:MetadataDate>2014-11-04T15:26:42-05:00</xmp:MetadataDate> <xmp:ModifyDate>2014-11-04T15:26:42-05:00</xmp:ModifyDate> </rdf:Description> <rdf:Description rdf:about="" xmlns:dc="http://purl.org/dc/elements/1.1/"> <dc:format>application/x-shockwave-flash</dc:format> </rdf:Description> <rdf:Description rdf:about="" xmlns:xmpMM="http://ns.adobe.com/xap/1.0/mm/" xmlns:stRef="http://ns.adobe.com/xap/1.0/sType/ResourceRef#"> <xmpMM:InstanceID>xmp.iid:EAB7B9250D2068118083F07BA108F061</xmpMM:InstanceID> <xmpMM:DocumentID>xmp.did:EAB7B9250D2068118083F07BA108F061</xmpMM:DocumentID> <xmpMM:OriginalDocumentID>xmp.did:F77F1174072068118083A353E50FFFFA</xmpMM:OriginalDocumentID> <xmpMM:DerivedFrom rdf:parseType="Resource"> <stRef:instanceID>xmp.iid:F77F1174072068118083F07BA108F061</stRef:instanceID> <stRef:documentID>xmp.did:F87F1174072068118083A353E50FFFFA</stRef:documentID> <stRef:originalDocumentID>xmp.did:F77F1174072068118083A353E50FFFFA</stRef:originalDocumentID> </xmpMM:DerivedFrom> </rdf:Description> </rdf:RDF> Frame # Frame Bytes Total Bytes Scene ------- ----------- ----------- ----- 1 30026 30026 Scene 1 (AS 3.0 Classes Export Frame) Scene Shape Bytes Text Bytes ActionScript Bytes ------- ----------- ---------- ------------------ Scene 1 38 0 16116 Symbol Shape Bytes Text Bytes ActionScript Bytes ------------- ----------- ---------- ------------------ arrow_mc 0 0 0 background_mc 0 0 0 base_mc 28 0 0 button_png_mc 0 0 0 headline_1_mc 0 217 0 headline_2_mc 0 84 0 logo_mc 494 0 0 subhead_mc 0 147 0 Font Name Bytes Characters ---------------- ---------- ---------- TradeGothic-Bold 3541 .?ABCDEGHIJLNOPRSTUWYaceghiklnoprtuvwxy ActionScript Bytes Location ------------------ -------- 16116 Scene 1:Frame 1 Bitmap Compressed Original Compression ---------------- ---------- ---------- ----------- background_a.jpg 5858 300000 Imported JPEG=102 Untitled-1.png 549 10212 Lossless button(1).png 1411 4640 Lossless import com.greensock.*; import com.greensock.easing.*; import com.greensock.plugins.*; TweenPlugin.activate([FrameLabelPlugin, ColorTransformPlugin, TintPlugin]); import com.greensock.plugins.TweenPlugin; import com.greensock.plugins.BlurFilterPlugin; TweenPlugin.activate([blurFilterPlugin]); //moves headlines off stage TweenLite.to(headline1_white_mc, 1, {x:-250, y:137.2, delay:6, ease:Sine.easeOut, blurFilter:{blurX:10, blurY:10} } ); TweenLite.to(headline1_bronze_mc, 1, {x:527, y:137.2, tint:0x996007, delay:6, ease:Sine.easeOut, blurFilter:{blurX:10, blurY:10 } } ); //moves final headline onto stage TweenLite.to(headline2_white_mc, .75, {x:203.65, y:63.65, alpha:1, delay:7, ease:Sine.easeOut } ); TweenLite.to(headline2_bronze_mc, .75, {x:203.65, y:63.65, alpha:1, tint:0x996007, delay:7, ease:Sine.easeOut } ); //moves white base block and white arrow onto stage TweenLite.to(base_mc, 1, {x:150, y:225, delay:8, ease:Sine.easeOut } ); TweenLite.to(arrow_mc, 1, {x:239, y:183.95, delay:9, ease:Sine.easeOut } ); //fades in final elements TweenLite.from(logo_mc, 2, {x:239, y:208.55, alpha:0, delay:10, ease:Sine.easeOut } ) TweenLite.from(button_mc, 1.4, {alpha:0, delay:9.75, ease:Sine.easeOut } ); TweenLite.from(subhead_mc, 1, {alpha:0, delay:10, ease:Sine.easeOut } );