Leaderboard

Hi @bennyboy1978 Here's a demo I made for this thread. You may find it useful as it deals with blur events.

Hello @Alan Kell and Welcome to the GreenSock Forum! Without a codepen we wont be able to see performance issues. First i would say that you should change the CSS property top in your tweens to use y (translateY). Since animating a position offset like top (as well as left, bottom, or right) will cause your element to trigger layout which is bad for performance. Using CSS transforms will allow your element to be animated without causing a layout calculation on every render tick (frame), which means silky smoothness. See CSS Triggers - top: https://csstriggers.com/top But as far as setting CSS properties with jQuery css() method. You should use the GSAP set() method instead of using the jQuery css() method. So this way you are setting CSS properties via GSAP so it can keep track and record what CSS properties you change. Otherwise you are changing css properties outside of GSAP. So you can change the jQuery css() method from this: // change jQuery css() method $("#modelSwipeLayer").css('display', 'none'); $("#ctlTopCurve").css('display', 'block'); $("#ctlTopCurve").css('z-index', '1'); $("#ctlHeader").css('height', '40%'); $("#imgHeader").css('marginLeft', $(window).width()); $("#imgHeader").attr("src", "/Content/Images/hero-image-3.jpg"); $("#imgHeader").css('z-index', 0); $("#IndividualDashCompareDescriptionContainer").css('display', 'block'); $("#IndividualDashMeasureDescriptionContainer").css('display', 'block'); $("#imgHeader").css("opacity", 0); $("#imgHeader").css("marginLeft", 0); To this using the GSAP set() method and using the GSAP AttrPlugin for setting your image src attribute: // to the GSAP set() method and AttrPlugin TweenLite.set('#modelSwipeLayer', {'display': 'none'}); TweenLite.set('#ctlTopCurve', {'display': 'block', 'z-index': '1'}); TweenLite.set('#ctlHeader', {'height': '40%'}); TweenLite.set('#imgHeader', { 'marginLeft': $(window).width(), 'z-index': 0, attr:{ "src": '/Content/Images/hero-image-3.jpg' } }); TweenLite.set('#IndividualDashCompareDescriptionContainer', {'display': 'block'}); TweenLite.set('#IndividualDashMeasureDescriptionContainer', {'display': 'block'}); TweenLite.set('#imgHeader', {"opacity": 0, "marginLeft": 0}); But its always better to create a reduced codepen example for use so we can test your code live: Resources: GSAP set() : https://greensock.com/docs/TweenLite/static.set() GSAP AttrPlugin: https://greensock.com/docs/Plugins/AttrPlugin Happy Tweening!

Hi Severinskr, Welcome to the GreenSock forums. All three of those websites use GSAP for their animation, so it's safe to say it would be a good choice for you However, it's important to note that you only need a membership if you need one of the the bonus plugins or the commercial license. The vast majority of GSAP is free to use and you can do amazing things without joining the Club. It seems like you are just dipping your toes into your investigation so I don't want to confuse you with a bunch of options that you probably don't even need. I would recommend the following path: Play with GSAP for a week two. Read the Getting Started article, read the docs, watch our free videos, and most importantly try building your own animations of VERY simple things. https://greensock.com/learning Once you understand the API and how to build some simple timelines, then check out ScrollMagic. ScrollMagic is a third-party library that makes it fairly easy to trigger GSAP animations based on your scroll progress. It is not necessary for what you want to do, but probably the easiest approach to learn with solid examples to follow. http://scrollmagic.io/examples/basic/simple_tweening.html I would only suggest you look into Club GreenSock after you have a working knowledge of the API of the core tools (TweenMax, TimleineMax, etc). The good news is you can try any of the Club plugins for free. https://greensock.com/try-plugins

Hi @bennyboy1978 If I understand your question correctly, I think this should work for you. $("input").focus(function() { TweenMax.to($(this).siblings(), 0.6, { y: -45, x: -20, ease: Power2.easeOut }); }); Happy tweening.

Hi again @FilGapper Niraj After looking at it you would be better off using my second example like PointC posted above. This is because my first example animates the width of a paragraph to show each letter on each SteppedEase. So its basically showing a little bit of the <p> tag when each letter is revealed. That is a problem for multi-line sentence in one paragraph since width is being animated. Usually you can just add to your CSS white-space-normal so it wraps, but you would see both lines animate at the same time instead of one line at a time. So you would have to use maybe 2-3 <p> tags for each line of the sentence. And then trigger each paragraph line after the previous one is complete along with killing the blinking on that line that is complete. With each line having their own tweens or timeline. Whereas my second example is splitting that paragraph tag into <div> tags for each letter using GSAP SplitTextPlugin. Then animating the autoAlpha property (CSS properties: opacity and visibility) for each <div> tag. So adding a <br> tag like @PointC did above would be the quickest way to have it animate the typewriter effect on a 2nd line. Happy Tweening!

Yeah, if you're using @Jonathan's technique from above, you can add a <br>.

Glad it worked well for you. I'm working on another enhancement to MorphSVGPlugin at the moment, so once that's done we'll probably push things out at that point. If you need something before then, just PM me and I'll hook you up Thanks for being "Business Green"!

Try using Google's polite loading template at: https://support.google.com/richmedia/answer/2672514?hl=en You're also loading a number plugins that are redundant or you don't need. jQuery is not needed at all for a simple animation like this and TweenMax already includes TimelineMax, CssPlugin and easePack. You don't need to explicitly run them as you have in your HTML. It also looks like you're trying to use JavaScript to create a second CSS (polite.css) file. You should not have to do this because you can initialize everything you need in your global.css. While it's technically possible to load a second CSS file, I believe it's poor programming practice to do that especially in this case where you have very simple animation. Remember that efficiency should be your ultimate goal when building banners. As a result, you should only load plugins, scripts, css files, etc that you need. You can also contact Double Click directly through chat or email and can even send them your code. They will often write big sections of code for you.

Hi @FilGapper Niraj and welcome to the GreenSock Forum! To better help you, you should create a reduced codepen demo example. This way we can see your code live to help you achieve what your after, since it will be hard to go just by your html markup and not seeing it with css and js in a live editable environment to test your code properly. Happy Tweening!

This is the thing I've been working on... basically i have two end points that go through a predefiined point each, so the mid point where all the points meet makes the text... and because they've got a little bit of a delay / change in speed in has an more natural feel... I guess this is the best way to do it... i wanted to avoid a tween to the mid point and then another tween to the end point.. Didn't realise I could feed the ease back in... I'll do that and reverse it by eye I think Thank you!

Awesome! Works like a treat Thanks so much for the quick reply!

I didn't notice any shaking. Hm. Oh, and I'd definitely recommend using scaleX:2 rather than attr:{transform: "scaleX(2)"}. Much faster.

Hello @Josef and welcome to the GreenSock Forum! Sorry your having this shaky issue. I was also seeing a slight jitter shaking of letters, but in Firefox and Chrome on Windows 10. To better help you troubleshoot this: Can you please verify what OS and OS version you are seeing this on? What Chrome version is this? I believe this is caused by the animating of the width attribute. You can see how it is less or not shaky when you comment out that tweens that animate the width attribute. Maybe you can animate scale instead of the width attribute? But we are still looking into this so i can test on an Apple device so i can see exactly what you are seeing. Thank you while we look into this for you

Thanks! Exactly what I needed. var mySplitText = new SplitText("#quote", {type:"words,chars", tag: "my-custom-tag"}); https://codepen.io/anon/pen/eQvWBJ Could you tell me when will you release the new version with this improvement? When the release happen, you should add this option to the documentation of SplitText: https://greensock.com/docs/Utilities/SplitText/SplitText

I am pretty sure you don't need React for banner ads ?

Hi @Gubbels, Welcome to the GreenSock Forum. Here are a few tips in addition to the good advice from @Sahil. You can build both animations in a TimelineMax and position both with a gap, starting same time or with an overlap (more info here). You can use autoAlpha in the aspect opacity . autoAlpha: Identical to opacity except that when the value hits 0 the visibility property will be set to "hidden" in order to improve browser rendering performance and prevent clicks/interactivity on the target. When the value is anything other than 0, visibility will be set to "inherit". It is not set to "visible" in order to honor inheritance (imagine the parent element is hidden - setting the child to visible explicitly would cause it to appear when that's probably not what was intended). And for convenience, if the element's visibility is initially set to "hidden" and opacity is 1, it will assume opacity should also start at 0. This makes it simple to start things out on your page as invisible (set your css visibility:hidden) and then fade them in whenever you want. Instead of fromTo simply from (= defining the starting values), if the final properties are defined in css - for example css: font-size: 32px; and scale: 0.4. Happy tweening ... Mikel

That's really well written actually. To set delay before text fades out again, you can set repeatDelay property. You are setting delay in both from and to values but it will ignore delay in 'from' values. On codepen you don't have to write entire HTML, you can add your scripts from settings and just write HTML body in codepen, rest is not needed.

Hello Ledtobias and welcome to the GreenSock forum! Here is that same effect using the same HTML markup and CSS.. minus the CSS animation @keyframes, but animated with GSAP. And this example: It uses the GSAP SteppedEase ease http://greensock.com/docs/#/HTML5/Easing/SteppedEase/ With SplitText that would take some planning to make sure all the split div tags parent width is animated and centered via margin auto. Or by only animating the parents transform negative translateX (x property in GSAP) value on every animated step. while animating the width. But there are many ways to use SplitText to accomplish this. Keep in mind that example uses ems sometimes different browsers might render different due to inherited browser defined stylesheet. And since it's using a web font that might need you to declare other CSS properties for your font text so it looks consistent across all modern browsers.