Search the Community

Hi there, I'm using TimelineMax and getting some great results. I'm getting quite proficient with using the Timeline to animate various elements on the page. I've found a script called Typed.js that I've been able to run independently of the Timeline perfectly but I'm unsure of how to get it to play within the timeline? I know there are some callback features but my Javascript isn't great! http://www.mattboldt.com/demos/typed-js/

I tried to add a border to a banner Ive made, but none of the tries worked i tried .to(type1, .3,{backgroundColor: "#000000", border:"40px #00a1d6 solid"}) I tried with an inset and i get the same effect but I dont want it to be transparent. .to(type1, .3,{backgroundColor: "#000000", box:"inset 0 0 0 7px #00a1d6 solid"}) I like how it looks with the inset but I the only thing about it is the shadow effect and how things can be seen under the inset once the logo passes by. Here is my codepen

GreenSock Community, I hope all is well. The ISSUE - Global Var not being Passed to local onComplete - onStart etc. Has anyone else experience this issue? Or is it something I am doing wrong? See below. It's not a GSAP issue, as far as I can tell... I created a simplified Codepen using just jQuery for testing. Here are the links: Codepen with GSAP - https://codepen.io/jh-thank-you/pen/pedXxO Codepen without GSAP - https://codepen.io/jh-thank-you/pen/QpaWbg Snippet from my Stack Overflow post: Thanks for any help/advice.

Hi, I created a simple roll-over effect for multiple elements on a webpage: portfolioVak1 = $("#portfolio-vak1"); // Rollover Tweens portfolio portfolioTween.to('#portfolio-titel1', 0.3, {y: "-=20px", delay: 0.1}).to('#portfolio-bekijk1', 0.3, {y: "-=43px", delay: 0.1}, '-=0.3'); portfolioVak1.mouseenter(function(){ portfolioTween.play(); }); portfolioVak1.mouseleave(function(){ portfolioTween.reverse(); }); This works perfectly! But now I want this exact same effect to happen on 30 elements on the same page. Off course, the most clean way to do this would be to create a loop, but unfortunately I don't have the knowledge to make a loop happen in this situation. So the code needs to work on 'portfolioVak2', 'portfolioVak3' ...... 'portfolioVak30'. The tweened elements will also change: '#portfolio-titel2', '#portfolio-titel3' etc. and '#portfolio-bekijk2', '#portfolio-bekijk3' etc. Thanks for your help, Roelof

Sorry guys, my question might not be entirely related to Tweenmax or animations ( ) !! I stuck with the piece of code below where basically we animate sections with mousewheel . Each sections has it's own animations (intro and outro) .And i stuck at the end trying to concatenate functions and call them. I already ask on stackoverflow but their solutions is not something i'm confortable with yet. Here is the sample code var siteGlobal = (function(){ init(); var init = function(){ bindEvents(); } // then i got my function to bind events var bindEvents = function(){ $(document).on('mousewheel', mouseNav()); $(document).on('keyup', mouseNav()); } // then i got my function here for capture the event var mouseNav = function(){ // the code here will capture direction // nextSection(); } var nextSection = function(){ // Here we check if there is prev() or next() section // if there is do the change on the section // switchSection(); } var switchSection = function(nextsection){ // Get the current section and remove active class // get the next section - add active class // get the name of the section with data-name attribute // throw the animation var myFunctionOnEnter = window['section'+ Name + 'Exit']; } // Let's pretend one section is call Intro var sectionIntroExit = function(){ // animation code here } }(); Calling myFunctionOnEnter() doesn's seems to work..What did i do wrong?

Hey everyone, I have hit a snag in my development. I have created a new timeline that i want to repeat once it finishes.It seemingly works but for some reason it doesn't start the repeat from the first tween but instead the second tween in the list tlMain = new TimelineMax({repeat:-1}); tlMain //I WANT the repeat to start from here in the timeline and play ALL tween below BUT... .fromTo(Pocket, 0.5, {scaleX: 3, scaleY: 3, autoAlpha: 0}, {scaleX: 1, scaleY: 1, autoAlpha: 1}) //Repeat seems to start here in the timeline instead, skipping the first part of my animation .fromTo(Pocket, 0.1, {scaleX: 1, scaleY: 1}, {scaleX: 1.04, scaleY: 1.04}, '-=0.05') .fromTo(Pocket, 0.15, {scaleX: 1.04, scaleY: 1.04}, {scaleX: 1, scaleY: 1}, '-=0.05') .fromTo(Crumbs1, 0.1, {x: '-10px', scaleX: 1.01, scaleY: 1.01, autoAlpha:0}, {x: '-5px', scaleX: 1, scaleY: 1, autoAlpha:1},"-=0.15") .fromTo(Crumbs2, 0.1, {x: '-10px', scaleX: 1.01, scaleY: 1.01, autoAlpha:0}, {x: '-5px', scaleX: 1, scaleY: 1, autoAlpha:1},"-=0.2") .fromTo(Crumbs3, 0.1, {x: '-10px', scaleX: 1.01, scaleY: 1.01, autoAlpha:0}, {x: '-5px', scaleX: 1, scaleY: 1, autoAlpha:1},"-=0.3") .fromTo(LogoContainer, 1, {y: '-175px'}, {y: '0px'}) .fromTo(line1, 0.25, {x: '-5px', autoAlpha:0}, {x: '0px', autoAlpha:1}) .fromTo(line2, 0.25, {x: '-5px', autoAlpha:0}, {x: '0px', autoAlpha:1}) .fromTo(line3, 0.25, {x: '-5px', autoAlpha:0}, {x: '0px', autoAlpha:1}) .repeat(-1).repeatDelay(2)//Repeat Call can anyone see why it repeats starting after the first tween instead of starting from the very beginning of the timeline?

I just finished creating 2 minutes animation with ~80 objects. I spend more time then i would we spend in after effects or photoshop, but i can make edits 10 times faster, then in Adobe programs. I already asked about UI and got an answer that Greensock using tweenui.com behind the scene (or vise versa). (I can't use this tool, because it's same "Adobe layers timeline system" that i am trying to get rid of using greensock.) One of the most time consuming thing was in the end - adding new object to my scene. 1. I create div element with a path to image source and id 2. I create var shortcut image_name = $("#image_name") (just realized this is not necessarry) 3. I set object to opacity:0 and showing it when it's time My question is - what technologies i can use to make this step easier? I think i should create json array and parser for it. And add image to json dynamicly. And create new array for this image that will have greensock .set function ... okay, my brain just pooped at that point. Can you give me a hint of what should i use? Thank you forum.

im try to fire timeline when a li it's hover, so i create a var with my timeline, and with event.delegateTarget to find children and not all with .CLASS this is my code $(".gb-help-list ").on('mouseover', 'li', function (e) { console.log('mouse'); var tl = new TimelineLite(); tl.to($(event.delegateTarget).find('.line-help'), 2, {width: '100px', ease: Power4.easeOut}) .to(".line-help", 2, {width: '100%', ease: Power4.easeOut}, "-=1"); }).on('mouseout', 'img', function (e) { TweenLite.to($(e.delegateTarget).find('span'), 1.5, {opacity:0}); }); I don't see any error in console, but this : o($(event.delegateTarget).find('.line-help'), 2, {width: '100px', ease: Power4.easeOut} doesn't fire.... anyone can helpme? Thx in advance

So, I know this is going to be a huge wall of code (so maybe just go through to the codepen) but I'm having a very minor issue. For the most part, everything that I've coded works (albeit, likely very bloated and ugly code)... except: the very first animation when "Trigger 2" is pressed doesn't work. Every subsequent one does. The first, doesn't. My html is as follows: <ul> <li> <span class="reveal-trigger" data-target-id="reveal-recipient-1">Trigger 1</span> <div id="reveal-recipient-1" class="reveal-recipient">Target to reveal when I press Trigger 1</div> </li> <li> <span class="reveal-trigger" data-target-id="reveal-recipient-search" id="search-trigger">Trigger 2</span> <div class="reveal-recipient-container" > <div id="reveal-recipient-search" class="reveal-recipient">Target to reveal when I press Trigger 2 <input id="boom" type="text"> </div> </div> </li> <li> <span class="reveal-trigger" data-target-id="reveal-recipient-3" id="nav-trigger">Trigger 3</span> </li> </ul> <div id="reveal-recipient-3" class="reveal-recipient">This recipient is intentionally outside the ul containing the triggers</div> CSS: .open { background-color:green; } li { float:left; list-style-type:none; } .reveal-recipient-container { //border:solid 1px red; height:120px; display:none; overflow:hidden; position:relative; } .reveal-trigger { padding:1em 2em; display:block; background-color:hsla(110,60%,50%,1); border-radius:3px; margin:5px; cursor:pointer; &:hover { background-color:hsla(110,60%,70%,1); } &.active { background-color:hsla(130,60%,40%,1); color:white; } } .reveal-recipient { position:absolute; width:100px; transform:translateY(-100%); display:none; background-color:white; padding:1em; box-shadow:0 2px 0 rgba(0,0,0,0.05); border:solid 1px rgba(0,0,0,.1) } And then, my loyal javascript: $(document).on('click', function(event) { if (!$(event.target).closest('.reveal-recipient').length){ if (!$(event.target).closest('.reveal-trigger').length){ TweenMax.to($('.reveal-recipient'), .3, {display:'none', y:'-100%', autoAlpha:0}); //remove open class from any open $('.reveal-recipient').removeClass('open'); $('.reveal-trigger').removeClass('active'); $('.reveal-recipient-container').hide(); } } }); $('.reveal-trigger').click(function(e) { //remove active class from other triggers $('.reveal-trigger').not(this).removeClass('active'); //toggle active class on this trigger $(this).toggleClass('active'); //get target element var triggerId = $('#' + $(this).attr('id')); var target = $('#' + $(this).attr('data-target-id')); var targetContainer = $($(target).parent().closest('.reveal-recipient-container')); // Animations if($(this).is('#search-trigger')) { var animation = TweenMax.to(target, .3, {display:'block', yPercent:'0%', x:'0%', autoAlpha:1, onComplete:function() { //once animation is complete, if the target has an input, focus on that input if(target.find('input').size() > 0) { target.find('input').focus(); } }}); } if($(this).is('#nav-trigger')){ var animation = TweenMax.to(target, .3, {display:'block', y:'0%', x:'100%', autoAlpha:1}); } //hide all elements of "target" class, except the current target if($('.reveal-recipient.open').not(target).size() > 0) { //TweenMax.to($('.target.open').not(target), .1, {display:'none', y:'0%', autoAlpha:0}); TweenMax.to($('.reveal-recipient.open').not(target), .3, {display:'none', yPercent:'-100%',x:'0%', autoAlpha:0}); //remove open class from target elements that are now hidden $('.reveal-recipient.open').not(target).removeClass('open'); $(targetContainer).delay(300).hide(0); } //if this element is now active if($(this).hasClass('active')) { //show current target element animation.play(); //indicate that this target class element is now open target.addClass('open'); $(targetContainer).show(0); } //if the element is no longer active else { //hide the target TweenMax.to(target, .3, {display:'none', yPercent:'-100%', x:'0%', autoAlpha:0}); //remove open class from newly hidden target element target.removeClass('open'); $(targetContainer).delay(300).hide(0); } });

Hi - I am trying to troubleshoot some animation stuttering in an app we built. I decided to include GSAP jQuery plugin to see if it would make a difference, but I'm not sure it's even being utilized over jQuery's native animate. How do I know? I include the library: <script src="script/vendor/TweenMax/TweenMax.min.js"></script> <script src="script/vendor/jquery/jquery.gsap.min.js"></script> Then here's a typical animation call: $(obj).stop().animate({ rgb: 127 }, { duration: 2000, easing: (Constants.CUSTOM_EASE ? Constants.EASE : "easeOutQuart"), step: function() { var rgb = ~~ obj.rgb; self.drawArrow(rgb * 65536 + rgb * 256 + rgb); } }); As far as judging performance, is there a good, definitive way to see which is operating faster? I have Chrome Dev Tools FPS counter open, but both platforms seem to operate mostly at 60fps in the counter, with the occasional (severe) dropoff - which is what I'm trying to solve for.

Hi everyone, I am a bit new to GSAP, so forgive me if this is a silly question. I am trying to add a leaving animation and enter animation on html content that I am replacing with Jquery's .html() method. When I click the element, the contents of that element is replaced with new content that is contained within a div with class="changing-content". I would like the old content to animate off the screen and the new content to animate onto the screen. JS: $('.content-container').click(changeHtml); function changeHtml () { var newHtml = ` <div class="changing-content"> //Some new content is interpolated here from an object </div> `; $('.content-container').html(newHtml); } HTML: <div class="content-container"> //new content goes here </div Any help will be greatly appreciated! Cheers

First of all, you can find a simplified demo of my code in this JSFiddle. I found that my problem happens the way I describe it in Google Chrome, so if you plan to try and fix the bug, please use that browser. I apologize if the code is not very well simplified; please consider that this is a snippet from a bigger project. I'm working on a webapp that uses JQuery and GreenSock's TweenLite for animations. This app consists on some menus that control everything, that are transitioned between using the bodyChange() function. This function has two parameters: nextOrPrev, that runs one animation or another based on the value provided ("next" or "prev"). Only the "next" animation is done yet, but that is not important for now. The "prev"animation, not yet used, just emits an alert("prev"). bodyFunction. The function provided will fill the body with the elements necessary for that menu, and the wrap them in a #bodyWrap. In the demo I provide you with there are only two menus: The first one, mainMenu, with only a #playButton. When you click it, the bodyChange() function is called with the following parameters: ("next", playSettingsBody), playSettings being the second menu. This is the problem: when you click the playButton, the button goes up a on the screen and then executes the TweenLite animation. I can't see, however, why does the button "jump up", instead of staying in the same place and execute the animation. This is probably due to a small mistake. What is it? Thanks for any help.

Right now I have some code that I've hacked together that for the most part, does exactly what I want it to do. The problem is that the code itself seems convoluted. I'm talking more about the GSAP part my code, which has a lot of repetitious markup, but I'm at an odd's end on how to make it more concise. I've tried using the reverse(). function, but I can't seem to make it work... Any ideas? var trigger = ".trigger"; var recipient = ".target"; var not_trigger = $(".trigger").not(this); $(trigger).click(function(e) { e.stopPropagation(); recipient = '#' + $(this).attr('data-target-id'); var not_recipient = $(".target").not(recipient); if($(trigger).hasClass("active")){ $(trigger).not(this).removeClass("active"); } $(this).toggleClass("active") ; if($(".target").hasClass("open")){ $(not_recipient).removeClass("open"); TweenMax.to($(".target"), .3, {display:'none', y:'0%', autoAlpha:0}); if($(recipient).hasClass("open")){ $(recipient).removeClass("open"); TweenMax.to(recipient, .3, {display:'none', y:'0%', autoAlpha:0}); }else{ $(recipient).addClass("open"); TweenMax.to(recipient, .3, {display:'block', y:'100%', autoAlpha:1}); } }else { $(recipient).addClass("open"); TweenMax.to(recipient, .3, {display:'block', y:'100%', autoAlpha:1}); } });

Any ideas why this would be happening when I try to do a draggable within a jQuery Mobile page? http://screencast.com/t/Et3fQiVY Here is my draggable code Draggable.create(".drag1", { type:"x,y", edgeResistance:0.65, bounds:".ui-content" });

As you can see in the attached codepen, I want to make a small hover effect. after looking through some docs on both Jquery and GSAP, it still is not working. Is there something I'm doing wrong?

I have a horizontal gallery that is positioned centered on the page. I have a left and right button which slide the gallery left and right using TweenMax timeline on mouse hover. The right button is hidden on page load and I want to show the right button once the gallery reaches a certain offset position. If I use Jquery scroll I can detect the changing offset position of the gallery but if the user hovers on the button I can't get the changing offset position of the gallery while the gallery is tweening. How can I get the moving offset position of the gallery during mouse hover?

Hi all. Complete newbie to GSAP here. i'm looking forward to getting to grips with it to add some animation to a site I'm currently redesigning. At the minute though there's one legacy script on the site, which relies on jQuery. It's just a wee utility script which will animate scrolling to any element on a page with an ID attribute set. [see the Codepen] I want to "translate" this to GSAP instead, as it seems daft loading jQuery as well as GSAP, just for this one feature. However my JavaScript Fu is a bit rusty and I'm not having much luck working out how to GSAP-ise my selector. The function is supposed to be triggered when a link is clicked with an href of `#someID` but not for an href of `#`. GSAP doesn't seem to like the `:not` selector... or my attempts to adapt the syntax are wrong. Here's the jQuery version: $(function() { $('a[href*="#"]:not([href="#"])').click(function() { // do stuff }); }); Could anyone give me a few hints?

I am working on a parallax page, but i have problems moving my elements while scrolling without the choppy behavior. Something tells me that the combination of top/bottom and translate is the root cause, but i am not sure how i solve my task without top/bottom? I am trying to create a behavior where all the elements are almost on top of each other when i have almost reached #section2. How can i avoid this choppy behavior? Its very important that the elements are placed as they are, but i think my usage of top and xPercent is causing performance issues

Hi First of all, I'm a total JS noob so apologies if this is a really simple question. I'm trying to animate burning embers, based on this confetti codepen: http://codepen.io/MAW/pen/wBGvgW But it's reliant on jQuery - I need a jQuery-less solution, using only TweenMax, is this possible? Trying to change the code myself (http://codepen.io/htwinam/pen/EPOryg) just throws up endless errors and doesn't work so would be massively grateful for any help Thanks

Hi there I'm working through some of the concepts of GreenSock and was hoping someone could point out to me the issue with this animation. As you can see in the codepen the slider measuring the duration of the entire timeline is only about 80% through when it appears all my animations are finished. As a result, when I got to reverse the animation, there is a considerable delay before an animation kicks in. Thanks DB

Hi, I'm a novice when it come to this stuff but I've recently set up a holding page for a friend of mine and she wanted a video on it. However I found out that a video is no good in iOS devices as it starts off paused, and you have to click to play it. Therefore I started browsing the net to find a solution, which seemed to be to turn the video into an image sequence. Thats when I found this example codepen http://codepen.io/jamiejefferson/pen/aJcGl So I used the Javascript and bits of the CSS to create my code http://codepen.io/anon/pen/pgrQZO . However as you can see it is very glitchy? I've been trying to iron out the flickering but with no luck. Any ideas how to smooth it all out, as I'm really stuck!? Many Thanks in advance for any help! http://greenwich-design.co.uk/clients/guiltydolls/guilty_dolls2/

Hi, I'm fairly new to GSAP, but I'm really enjoying experimenting with it. A hurdle I have come up against is how to hover over a specific div, and have an animation play based on which div is hovered over. I do not want to have to write the animation for each div. I know the way to do this is to use the jQuery selector 'this', but I can't get it to work for a timeline. I can get it to work using TweenMax.to('') etc, but I want to be able to use play() and reverse(), and so need it to work with a timeline. Rather than me babbling on, it's probably best to just check the codepen. Thanks for reading, and I hope you can help!

Hey All, Simple question I hope can be answered. At the moment when .card is clicked all the divs with the class .card animate. I only want to animate the .card div that is clicked. I've experimented heaps with $(this) selection and I can't get it to work as intended. Any help is much appreciated. Thanks all.

Hi, I'm developing a HTML app that needs to work exceptionally fast, particularly on mobile. So I've decided to sidestep using Jquery. I've been looking at http://youmightnotneedjquery.com/ as reference, and while I would not use Jquery for animation, I wondered if using bits of it's functionality would slow it down at all? eg: $(myElement).offset(); is very handy Would that undo all the performance-enhancing work on avoiding jquery code, or is using a combination of GreenSock/Jquery a good approach? From Google: Thanks

Please, could You explain me why the rotationX params doesn't fit like rotationY & rotationZ in my 3D cube test?