Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

Carl last won the day on April 4 2019

Carl had the most liked content!

Carl

Moderators
  • Posts

    9,152
  • Joined

  • Last visited

  • Days Won

    532

Community Answers

  1. Carl's post in Animation: Scale left-to-right was marked as the answer   
    Hi and welcome to the GreenSock forums,
     
    It is usually best if you provide a demo of the code you are working with so that we can get an understanding of how your elements are set up and part of the GSAP API you are familiar with. 
     
    I don't think I understand all of what you are asking but the animations used to reveal the animations can be built a number of ways. I did not study the effect in depth but it appears that a black element is expanding from the left edge. it then shrinks down to the right edge while the image fades in beneath it.
     
    This can be accomplished with a sequence of 3 tweens like: 
    var tl = new TimelineMax({repeat:3, repeatDelay:0.5}) tl.from(".cover", 1, {scaleX:0, transformOrigin:"left"})   .to(".cover", 1, {scaleX:0, transformOrigin:"right"}, "reveal")   .from("img", 1, {opacity:0}, "reveal"); https://codepen.io/anon/pen/VbWXbg?editors=1010
  2. Carl's post in Random (min,max) animation was marked as the answer   
    Nice demo
     
    The problem is that the randomNumber function will only return integers and with the values you are supplying only 0 or 1.
     
    function randomNumber(min, max) { return Math.floor(Math.random() * (1 + max - min) + min); } for (var i = 0; i < 100; i++){   console.log("randomNumber =", randomNumber(0.5, 1)) // 0 or 1 } take a look: https://codepen.io/anon/pen/wdgEgQ?editors=0011
     
     
    Since Math.random() already gives a number between 0 and 1 and you're desired range is between 0.5 and 1 I would just use Math.max() to figure out if Math.random() returns a value greater than 0.5 like:
    var scale = Math.max(Math.random(), 0.5); // get greater value so if Math.random() is something like 0.01 you will default to 0.5
     
    demo: http://codepen.io/GreenSock/pen/aWpawB?editors=0011
     
     
     
  3. Carl's post in Adding Line Breaks using Text Plugin was marked as the answer   
    Thanks for the demo. Very helpful.
     
    TextPlugin wasn't built to honor nested tags or anything fancy like that. 
    For what you describe SplitText will do the trick.
    Take a look at the following code and demo:
    textEl.innerHTML = textStr; var mySplitText = new SplitText(textEl, {type:"chars, lines"}) var tl = new TimelineMax({ repeat: -1, repeatDelay: 2, yoyo:true }); tl.staggerFrom(mySplitText.chars, 0.01, {opacity:0}, 0.01) https://codepen.io/GreenSock/pen/gWLeWx?editors=0010
     
    You'll notice there are no funny html characters showing up and it reverses fine (without collapsing). You can reverse the timeline whenever you want from the end using  tl.reverse(0);
     
    SplitText is bonus tool available to Club GreenSock members (Shockingly and Business Green) you can learn more about it here: https://greensock.com/SplitText
  4. Carl's post in Timeline .add() anonymous function to return tween? was marked as the answer   
    It sounds like using a function-based value will do the trick for you here as the values are not determined until the animation runs
     
    var customHeight = 0; var tl = new TimelineLite() tl.to(".box", 1, {width:500})   .to(".box", 1, {height:customHeight}) // 0    .to(".box", 1, {height:function(){  return customHeight; //500   }}); //change the value of customHeight 0.5 seconds after timeline starts TweenLite.delayedCall(0.5, changeCustomHeight); function changeCustomHeight() { console.log("huh") customHeight = 500; } notice that 2 tweens use the same customHeight value.
    The first height tween gets a value of 0 and the second gets a value of 500.
     
     
     
  5. Carl's post in Repeating fromTo without using Timeline was marked as the answer   
    I think you just need to set yoyo true and make sure that both autoAlpha values are not 0. like:
    TweenMax.fromTo("#circle", 0.5, {autoAlpha:0}, {autoAlpha:1, repeat:-1, yoyo:true, repeatDelay:2});
  6. Carl's post in Controling a timeline with an if/else statement was marked as the answer   
    if you want to schedule a pause to occur at a specific time in a timeline use addPause() where you now have pause().
     
    https://greensock.com/docs/#/HTML5/GSAP/TimelineLite/addPause/
     
    As for telling your timeline which label it should play your syntax is a little funky
    //good tl_click.play("open") //bad tl_click.play(), "open";
  7. Carl's post in How to toggle multiple timelines was marked as the answer   
    Welcome to the GreenSock forums,
     
    Thanks for the demo and helpful instructions.
     
    try adding
    tl3.reverse();  after you create the timeline
    https://codepen.io/GreenSock/pen/pPgxBo?editors=1010 (line 17)
     
    this way the first time click and you set tl3.reversed(!tl.reversed) the animation will play forward
     
    Just a tip, to make demos easier to debug its helpful to use descriptive names so:
     
    tl1 could be moveAnimation
    tl2 could be pulseAnimation
    tl3 could be openAnimaiton
  8. Carl's post in How do tween vars relate to SVG transformations? was marked as the answer   
    I can understand the confusion. Two things are in play here with GSAP
     
    1: When doing transforms on SVG elements GSAP will default to a transformOrigin of 0 0 based on the elements own coordinates. We want to to normalize SVG behavior with the more predictable behavior of normal DOM elements. SVG elements normally transform around an origin based on the parent SVG's coordinates. Notice how the blue and red boxes in your demo move up from their normal position. We would argue that is kind of strange and unexpected. Fortunately with GSAP you can choose to use svgOrigin or transformOrigin as illustrated here: http://codepen.io/GreenSock/pen/waKrNj
     
    2: GSAP always performs transform calculations in the same order (to be predictable). So the black box is moving over 10 to the right (x) and then being scaled to its top left corner.
     
    See this demo that hopefully illustrates the points above clearer. Notice how the blue box moves ABOVE the red box when you scale it down.
    https://codepen.io/GreenSock/pen/QpXqEa
     
    Definitely read: https://greensock.com/svg-tips to find out more about GSAP's unique strengths when dealing with SVG.
     
    If you have more questions, let us know.
  9. Carl's post in GSAP on other platforms than web? was marked as the answer   
    Great question, and your assumptions are correct, GSAP lives strictly in the JS world right now. 
     
    Some developers claim that Adobe AIR is still a great tool for cross-platform publishing to iOS and Android. Those folks can use our ActionScript version of GSAP but there really isn't enough interest for us to pursue or support AS3 tooling any further. 
     
    We've heard a handful of requests for an Apple Swift port of GSAP, but we are laser-focused on JavaScript right now due to the overwhelmingly strong market demand. 
  10. Carl's post in make a tween and see the effect immediately was marked as the answer   
    Alright, PointC gets 10 points for figuring this out before the demo was provided.
    If I understand correctly, setting immediateRender:false on the opacity tween in the fade out effect will solve the problem:
    if(effect == "fade"){     tl.fromTo(s1, 1, {opacity:1}, {opacity:0, immediateRender:false}, start);   } https://codepen.io/GreenSock/pen/dvEJNL?editors=0010
     
    If the in effect is fade and the out effect is fade you are building a timeline that has 2 fromTo tweens that alter opacity.
    The "in" effect fades from opacity:0 to opacity:1 
    The "out" effect fades from opacity:1 to opacity:0
     
    Since from() and fromTo()  tweens have immediateRender set to true by default you were instantly seeing the opacity:1 being set by the second tween in the "out" effect.
     
    Whenever you have multiple from() tweens affecting the same properties of the same element you will need to set immediateRender appropriately.
     
    Why this happens is more clearly explained here:
    https://greensock.com/immediateRender
     
    Let us know if that solution helps.
    Thanks for making the demo, it definitely clarified things way beyond the first post
  11. Carl's post in Bezier TimelineMax halfway and/or starting point was marked as the answer   
    Hi and welcome to the GreenSock forums.
    Thanks for the demo. Very helpful.
     
    1)
    When you use an SVG <circle> the browser pretty much controls where the start point of the path is. Your trick of rotating it is what most people do in this case.
     
    2)
    To get the timeline to remain paused with the small black circle snapped to the stroke you can force it to render the first frame by jumping to a progress(1) and then back to progress(0) instantly like:
    tl.progress(1).progress(0).pause(); 3) 
    Yes, you can tween halfway through the Bezier animation by tweening the progress of the timeline.
     
    See this demo: http://codepen.io/GreenSock/pen/YwOWmQ from 7 Hidden Gems of GSAP
     
    I modified your demo so that when you mouse over the svg the animation only plays half-way using this technique
     
    http://codepen.io/GreenSock/pen/VpqQRR?editors=0010
  12. Carl's post in Tweening the propertie of an object literal was marked as the answer   
    Thanks for the pen. A mere typo.
    In your object you had coeficient but in all your TweenMax code you had coeficent.
     
    update all your code to use coefficient and you are good;)
    var Obj = {   coefficient:{     type: "f",     value:0.39   },   glowColor: {     type: "g",     value:5   },   power: {     type: "a",     value:2   }, } TweenMax.to(Obj.coefficient, 5, {value:5,    onUpdate:function(){    console.log(Obj.coefficient.value)    document.getElementById("log").innerHTML = Obj.coefficient.value; }})
  13. Carl's post in DrawSVGplugin was marked as the answer   
    If you give each SVG position:absolute they will all be in the same place. You then just have to add some tweens to fade them in and out at the right time.
    Do you need something like this: http://codepen.io/GreenSock/pen/oZqrrO?editors=0110
     
    There are definitely ways to shorten the code with loops and functions that build the animations for you so you could do 100 svgs with very little code but I'm not sure if thats what you need.
  14. Carl's post in Overwrite tween + restart tween from it's current value was marked as the answer   
    Hi and welcome to the forums,
     
    Great job on the demo. Big help.
     
    The solution for this type of problem is to just use one tween and play() and reverse() it.
    In the demo below notice that I paused it at a progres(0.5) (halfway) to start
     
    var tween = TweenLite.to("#box", 5, {left:"100%", ease:Linear.easeNone}); tween.pause().progress(0.5)//stop halfway in middle $('.play1').on('click',function(){   tween.reverse(); }); $('.play2').on('click',function(){     tween.play(); }); https://codepen.io/GreenSock/pen/aJYYPR?editors=0010
     
    Its very difficult to manage 2 tweens on the same object like you have set up.
    Each animation you create needs to record its starting and ending values the first time it plays. 
     
    When using to() tweens, the start value is whatever the value happens to be when the tween first plays.
     
    In your demo if you hit the left button first, tween1 plays and its tween gets these values
     
    Tween1 values (move left)
    start value = left:50%
    end value = left:0%
     
    after that tween finishes if you hit the right button tween2's tween becomes
     
    Tween2  values (move right)
    start value = left:0%;
    end value = left:100%
     
    If you let tween 2 play all the way through so that left gets to 100% and try to go back to the left:0  by telling Tween1 to restart again you will have a problem because tween1's starting left value is 0% and the current value is 100%
     
    So in order for tween1 to get a new start value, you would have to invalidate() it and restart() it.
     
    Open this demo: https://codepen.io/GreenSock/pen/VpXXJo?editors=1010 and go through the following routine:
     
    Press left and let play all the way through
    Press right and let play all the way through
    Press left and let play all the way through
     
    YAY! it works... sort of
     
    However, when you invalidate a tween, you still have the same duration. So even though we can set new start values and avoid any unsightly jumps the duration becomes an issue if you switch directions while an animation is still playing.
     
    RE-RUN the same demo.
     
    press left button.
    When the line gets about 100px from the 0 position hit the right button
    quickly hit the left button
     
    You will see it takes 5 seconds now for the line to go back to the 0 position and travel roughly 100px. uh oh. So even though you are smoothly changing direction, the timing is going to be way off.
     
    Another problem with trying to use 2 tweens in different directions on the same object is that you will face an overwrite situation. As soon as you change direction mid-tween, the currently running tween will be overwritten by the new tween and killed, never to be played again. To avoid this in the invalidate() demo I also called pause on the other tween.
     
    I'm sure it could be explained better, but hopefully you can see that one tween is a much easier way to go about it.
  15. Carl's post in isActive() returns false even if animation is currently playing was marked as the answer   
    Thanks for adding the comments. Although you described that you weren't getting the desired results with isActive() it would be a big help to have some information on what the desired "visual" behavior of the demo is. It took me quite a while to unravel the recursive function calls, conditional logic and array manipulation to assess that you want the green box to turn magenta after it stopped moving. 
     
    I added a few console.log()s so you can see that you were only adding functions to the timeline, not the timelines those functions returned when called.
    Please see the demo here and follow the instructions:
     
    http://codepen.io/GreenSock/pen/dvJxGM?editors=0010
     
    After setting fixed = true on line 2 is that the result you want?
  16. Carl's post in Adding all tweens to one main animation - reasonable idea? was marked as the answer   
    sounds like you need time()
     
    masterTl.add(myTween, NOW) would be
    masterTl.add(myTween, masterTl.time())
  17. Carl's post in Call methods in timeline was marked as the answer   
    First, thanks for the demo. Tremendous help.
     
    When tweens are created the engine searches for the targets (in this case the divs). Your object.create() method doesn't get called until after the timeline and all its child tweens are built which is why the set() only changes the opacity of the pre-existing div. 
     
    You can use call() or add() to schedule the execution of a function that will run code that will find all the divs like:
     
    var obj = {   create: function () {     $('body').append("<div>newly added div</div>")   } } var tl = new TimelineMax(); tl.call(obj.create) tl.set("div", {color:"pink"}, "+=1")//will make original, pre-existing div pink tl.add(makeRed, "+=1") function makeRed() {   TweenLite.set("div", {color:"red"}); //colors both divs red } http://codepen.io/GreenSock/pen/PpKdJv?editors=0011
     
    Does that help?
  18. Carl's post in Background Exit click and CTA effect onclick and hover was marked as the answer   
    moved to banner forum
  19. Carl's post in get Draggable Snap Distance before onThrowComplete was marked as the answer   
    Having trouble understanding the code. In the future please try to make a demo. 
     
    When you have throwProps:true your Draggable instance has access to a tween property which represents the ThrowProps tween that is created.
    If I understand the question properly, you can advance that tween to a progress(1), grab the x value and then restart the tween. 
    Draggable.create("div", {  snap:[100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200], type:"x",   throwProps:true, onDragEnd:function() { this.tween.progress(1);     console.log("onDragEnd and this end x =", this.x)     this.tween.progress(0); },   onThrowComplete:function() {     console.log("onThrowComplete and this x =", this.x);   } }); http://codepen.io/GreenSock/pen/OPqpRJ?editors=0001
  20. Carl's post in Can I put staggerTo in labeled moment of timeline? was marked as the answer   
    Not sure I understand fully, but you would just add the position parameter after the stagger amount. You don't need to use a label.
    tl.staggerTo(stuff, 1, {x:500}, 0.2, "-=1"); // start 1 second earlier If you need more help, please provide a basic demo. Thanks.
  21. Carl's post in Animate a line going from point A to B was marked as the answer   
    It would be great to see a demo of what you've done so that we can gauge what is too unsharp about p5.js
     
    You should get really crisp lines from SVG and you can inject <line> or <path> elements dynamically and update their values to animate them with GSAP.
     
     
     
    there are plenty of tools out there to help you dynamically create SVGS too D3 is pretty popular:
    http://bl.ocks.org/paulovn/9686202
    http://christophermanning.org/projects/building-cubic-hamiltonian-graphs-from-lcf-notation
     
     
    Pixi is another canvas library and here is a demo I found http://jsfiddle.net/tahirahmed/jy156qox/
     
     
    Blake Bowen does a lot with animated lines in both SVG and canvas. Great results!
     
    http://codepen.io/osublake/pen/vXZPxN (move circle)
    http://codepen.io/osublake/pen/RrBXxB (move circle)
    http://codepen.io/osublake/pen/QKYGyo
    http://codepen.io/osublake/pen/yakOjY
  22. Carl's post in Particles - or "How to assign different start/end values for each class element dynamically" was marked as the answer   
    Nice demo, Shaun.
     
    Just a little tip. When using function-based values the function is called for each target in the tween which means you don't need an each() loop.
    Check it out: http://codepen.io/GreenSock/pen/peEqKm
  23. Carl's post in Automatically loop banner animations with NanoTween was marked as the answer   
    Very sorry for the delay, we do our best to answer all threads but we occasionally miss one. I suspect the community members that downloaded your file were confused by NanoTween which isn't one of our products. I haven't heard of it before but it seems it has a very light feature-set and wasn't really built for sequencing. FWIW we had a TweenNano way back in the Flash days, but NanoTween isn't ours or something we support. 
     
    For something like this our TimelineMax will make sequencing and repeating a breeze. TimelineMax is part of TweenMax.min.js which is hosted by every major ad network so it is heavily cached and you aren't penalized for any filesize. 
     
    Here is a very simple example of a repeating TimelineMax animation: 
    var tl = new TimelineMax({repeat:2, repeatDelay:1}); tl.from("h1", 0.5, {x:-200, opacity:0})   .from("h2", 0.5, {x:200, opacity:0})   .staggerFrom(".box", 0.5, {y:50, opacity:0, ease:Back.easeOut}, 0.2); DEMO: http://codepen.io/GreenSock/pen/jBbNZp?editors=0010
     
    Notice how all the animations play in direct succession and I never specified any delays? With TimelineMax all the animations naturally play in succession but you can use gaps or overlaps with the position parameter <--must read
     
    If you want to learn more about GSAP, start here: https://greensock.com/get-started-js
     
    We'll be happy to help with any questions you have along the way. For general API questions post in: https://greensock.com/forums/forum/11-gsap/
     
    Our apologies again for the delay.
  24. Carl's post in How to handle situation where more than one "onUpdate" callback is required. was marked as the answer   
    hmm, interesting dilemma. Here's an idea:
     
    Once you know what timeline they want to plug into AnimPanel, add a new tween to the beginning of the timeline with a duration the same as the timeline. Give this tween its own onUpdate to handle all the scrubber control and stuff. This way you are not interfering with the user's own onUpdate on the timeline
     
    function animPanel(tl) { tl.to({}, tl.duration(), {onUpdate:animPanelUpdate}, 0) function animPanelUpdate(){   console.log(tl.progress()); } } http://codepen.io/GreenSock/pen/VpLBWQ?editors=0011  
  25. Carl's post in Understanding of set() - animation start/default values was marked as the answer   
    Hi Softevo,
     
    Welcome to the GreenSock forums.
    Thanks so much for the clear demo. Super helpful.
     
    The problem isn't with set() not working, it has to do with how fromTo() works. 
    All from-based animations (from(), fromTo(), staggerFrom() etc) are designed to render their start values immediately. When this happens your set() at the beginning of the timeline gets overwritten. 
     
    The solution is to add immediateRender:false to your fromTo() tween so that the starting values do not get applied until that tween starts running.
    tl.fromTo(".red", 1, {left:200}, {left:500, immediateRender:false}, 1); http://codepen.io/GreenSock/pen/GWJxmX?editors=0010
     
    immediateRender can be a tricky thing to understand, but hopefully this video helps: 
     

×