Jump to content

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

Dipscom last won the day on July 19 2019

Dipscom had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Community Answers

  1. Dipscom's post in Many Callbacks from SplitText was marked as the answer   
    Hi ,
    Welcome to the forums!
    The .stagger() family of methods have a onCompleteAll parameter that is after the position parameter like:
    .staggerFrom( targets:Array, duration:Number, vars:Object, stagger:Number, position:*, onCompleteAll:Function, onCompleteAllParams:Array, onCompleteScope:* )
    See the full description in the docs: https://greensock.com/docs/#/HTML5/GSAP/TimelineLite/staggerFrom/
    The way you have it setup, the onComplete call will be invoked at the completion of each of the elements being tweened. Not at the end of all tweens.
    You will want your code to be:
    tl.staggerFrom(chars, 2, { opacity: 0, scale: 0, y: 80, rotationX: 180, transformOrigin:"0% 50% -50", ease: g.Back }, 0.01, "+=0", doStuff);
  2. Dipscom's post in How can I execute a Javascript function in my timeline? was marked as the answer   
    What exactly is it that you want to do?
    To answer the question of: "How can I execute a Javascript function in my timeline". A dive into the docs will show you several ways:
    From looking at this Typed.js I imagine you could do something like:
    var tl = new TimelineMax() tl.to(...) tl.call(function(){ Typed.new('.element', {strings: ["First sentence.", "Second sentence."],typeSpeed: 0}) } ) ); tl.to(...) Worth mentioning that there are loads of ways to achieve a type writer effect using just GSAP, if you're interested.
    Does any of that help?

  3. Dipscom's post in Trying to set styles before playing timeline kills it was marked as the answer   
    I know you have said your final animation is quite complex but I don't know how different one animation is from the other.
    So, the way I would tackle this, would be to have a function building the individual timelines to each section and push them into a master timeline. Then, you can play the master timeline that would control all children.
    Another way would be, if you need all of those individual timelines to play independently, I would push the individual timelines into an array. Then, you can just run a check to see which timeline should play and which should reverse.
    Ah! Hold on, I'm starting to make sense of your code (sorry, jQuery always makes it confusing to me). You're already doing what I am suggesting...
    Let me check some things again...
    Ok, ok, I think I get it now and I can offer you a suggestion, here's a fork of your pen.

    See the Pen LWmgWZ?editors=0010 by dipscom (@dipscom) on CodePen
    Is this what you were after?
    If so, have a look at the SupressEvents bit here:
    By the way, thank you. I have learnt a neat little trick from reading your code. "Store animation in the DOM object of the item".
  4. Dipscom's post in image sequence on scroll - working locally but not on server was marked as the answer   
    Hi stevenb85,
    Welcome to the forums!
    I think you will be better off by trying to use a sprite-sheet rather than an image sequence. You will always be having loading issues if you are trying to update the "src" attribute of your <img> tag. Bellow is a thread here in the GSAP forums about sprite sheets:
    Your connection error could be one of N things. A super quick search online pointed me to this stackoverflow: http://stackoverflow.com/questions/24931566/getting-error-in-console-failed-to-load-resource-neterr-connection-reset
    Bottom line is that we can't be sure because depends on your setup.
  5. Dipscom's post in How to tween an element from its current position? The cleanest way. was marked as the answer   
    Well, if your requirement is to have a variable and use its value doubled, I am not aware of any other "less complex" way, save of creating a second variable...
    var space = 256; var doublespace = "-=" + space * 2; TweenMax.to(elementA, 3, {x:doublespace}); Ultimately, you need to specify what the tween needs to do...
  6. Dipscom's post in Wrong positioning when "popping up" an element using scale was marked as the answer   
    Hey Tazintosh,
    Welcome to the forums!
    I get that every so often... It's an easy fix actually. Just let GSAP handle the centring for your by using yPercent.
    Remove the CSS transform: translateY(-50%) and add the following in line 4 of your taz_animateOverlay() function:
    TweenMax.set(overlayElem, {yPercent:-50}); TweenMax.fromTo(overlayElem, 1, {...}); Easy peasy.
  7. Dipscom's post in Tween to x,y coordinate? was marked as the answer   
    Left and Top are not the same thing as X and Y. 
    X,Y are an alias to the translate() transform. So, if you are setting you element at left:300, top:200, it is effectively sitting at x:0, y:0 (in the CSS lingo, transform: translate(0,0); )
    To achieve what you are after you can leave all your starting objects at left:0, top:0 and place them where you want using GSAP, then you can use absolute x and y.
    Like so: 
    See the Pen BWKvJb?editors=0110 by dipscom (@dipscom) on CodePen
  8. Dipscom's post in Phone Performance was marked as the answer   
  9. Dipscom's post in Threejs tween with sound in RAF was marked as the answer   
    Now we're getting somewhere.
    I changed to scale because rotation was way to epileptic to my liking.
    I think I get what you are trying to achieve. We can tackle it with this setup but just ever so slightly...
    You still want to set the rotation to happen with a .set() call and you still don't need a timeline for that.

    See the Pen zNgjQB by dipscom (@dipscom) on CodePen
  10. Dipscom's post in 200 particles, tween or canvas? was marked as the answer   
    You'll get away with a certain number of particles on DOM elements, desktops will not break a sweat, mobiles might struggle a bit.
    The optimal way of doing particles is using Canvas, more optimal would be using WebGL (but that can be overkill) - A specialised library such as Pixi will be the best solution, really. But Canvas will suffice if you're not doing much else.
  11. Dipscom's post in Simple carousel was marked as the answer   
    Hello Learning,
    You issue is in your CSS positioning. You need to set the slides to be absolute if you want them to occupy the same spot in the DOM, otherwise they will be stacked on top of each other.
  12. Dipscom's post in Creating A Loop Of Animated Text was marked as the answer   
    Hello emilychews,
    As Graig said: Welcome to the forums. Thank you for the CodePen, helps a lot to see your issues.
    I had a stab at your problem and saw that the solution is actually related to the fact you're using .fromTo() methods on all your tweens. They are useful but you have to know how they behave. Have a look at this video by Carl, it will explain you some important details:

    As for a solution, the bellow code is an amended version of yours. It took the liberty to change you y into yPercent and opacity into autoAlpha for more flexibility and control. In the docs, you will find detailed explanation (and loads more info) about those.
    .fromTo('.sliderbar', 3, {scaleX: 0}, {scaleX: 1})    //red slider bar underneath text .to('.slidetext1', .7, {yPercent: -50, autoAlpha:0}) .from('.slidetext2', .7, {yPercent: 50, autoAlpha:0}) .fromTo('.sliderbar', 3, {scaleX: 0}, {scaleX: 1})   //red slider bar underneath text .to('.slidetext2', .7, {yPercent: -50, autoAlpha:0}) // Make the first text jump to the start point .set('.slidetext1', {yPercent:50}) .to('.slidetext1', .7, {yPercent: 0, autoAlpha:1});
  13. Dipscom's post in Inline SVG circles on a circle was marked as the answer   
    That's expected behaviour. The long story short is that GSAP uses x and y as a proxy to transform translate(), they are not the same thing as the x and y in SVG, when you tween the x and y in your pen, you are really overwriting the transform rotate() with new values. 
    You can do one of two things, reposition your inner circles using transform translate() or use the attrPlugin like so:
    TweenMax.staggerFrom(menuItems, 2, {attr:{cx:2000, cy:2000}, autoAlpha: 0, ease: 'Power4.easeOut'}, 0.5); Does that help?
  14. Dipscom's post in Too many of "from" tweens was marked as the answer   
    As a rule of thumb, you should limit using .from() tweens to only the first tween of the element, it really can cause confusion and not pleasant behaviour.
    However, if you must work with it, for whatever reason that might be, you just need to grasp the immediateRender property and how GSAP works with it.
    Carl does, as always, a great job of explaining it all in the following video: 
    It should set you on your path.
  15. Dipscom's post in Delay an entire label was marked as the answer   
    tl.add("slindeMoves", "-=0.5"); *Magic* 
  16. Dipscom's post in It's very strange behavior of animation on intitial animation and onHover event. was marked as the answer   
    It's not that much of a hack.
    I can tell you why it works that way, though. It's like what I said in the previous post, you have two timelines trying to control the same animation but no way for them to communicate between them.
    This time, you are interrupting the first one as you were before but this time you are telling the second one to start at a particular point and end at a particular point. And also, this time, you are creating the second animation every time there is a hover over. It should still work without recreating it every time.
    The ideal scenario here is for you to create one timeline for the first animation and another for the secondary animation then, a third master timeline that controls the other two.
  17. Dipscom's post in Cant seem to set the initial opacity + scale state of my elements was marked as the answer   
    Personally I would go with an negative relative position parameter to create the overlap, that'll be more flexible than the stagger and will suit your situation better as you want the user to have a moment to read the text.
    var tween = new TimelineMax() .add(TweenMax.from('.infographic-text-wrapper-1', 1, { autoAlpha: 0, scale: .9, repeat:1, yoyo:true, repeatDelay:1 }) ) .add(TweenMax.from('.infographic-text-wrapper-2', 1, { autoAlpha: 0, scale: .9, repeat:1, yoyo:true, repeatDelay:1 }), "-=0.3" )
  18. Dipscom's post in Simple way to toggle a div and the svg morphs (toggles between 2 svg) was marked as the answer   
    Hi ChrisZio,
    Let me follow up your message here so others can see the answer, if you don't mind.
    You asked for more info using MorphSVG on a DIV and how to toggle between two shapes when clicking on a DIV.
    The info on the MorphSVG will be in the docs and on that link Carl has provided. As to "using MorphSVG on a div", well, that'll be generic JavaScript knowledge. It will be a matter of you wanting to do something and digging around to see what is available. Just like now, creating a toggle.
    Here's a super bare bones example: 
    See the Pen ZBmrXM by dipscom (@dipscom) on CodePen
    Hope this helps.
  19. Dipscom's post in Slow animation start and Staggered Pause was marked as the answer   
    Ah. DUH!
    I didn't see a little detail in the timeline... My bad.
    You are creating your tweens using an absolute time parameter. This is your first line of the timeline:
    tlWork.to('.prev-work', 0.3, {opacity: 1, cursor: 'pointer'}, 1) That last 1 is telling GSAP to start playing the animation at one second. So, when the click tells the timeline to play, it starts playing as you would expect but there is nothing happening for one second, that's why you think nothing is happening.   You can either set all your starting tweens to 0 and the subsequent ones to whatever absolute time you need tlWork.to('.prev-work', 0.3, {opacity: 1, cursor: 'pointer'}, 0)  .to('.yellow', 1,{top: '-100%', ease:Power2.easeInOut}, 0)  .to('.blue', 1, {top: '0', ease:Power2.easeInOut}, 0) But better yet would be to set labels to group the animations that do not start immediately, that way, you won't need to be adjusting the position parameter every time the length of the animation changes.
    tlWork .to('.prev-work', 0.3, {opacity: 1,cursor: 'pointer'}, 0) .to('.yellow', 1,{top: '-100%',ease:Power2.easeInOut}, 0) .to('.blue', 1, {top: '0',ease:Power2.easeInOut}, 0) .addPause() .to('.blue', 1,{top: '-100%',ease:Power2.easeInOut}, "NextSection") .to('.red', 1, {top: '0',ease:Power2.easeInOut}, "NextSection") .to('.next-work', 0.3, {opacity: 0,cursor: 'auto'}, "NextSection")   Here's a video about the position parameter.   And some bonus tips: Use autoAlpha instead of opacity - You won't have to keep changing the cursor from pointer to auto if you do. Use x/y instead of left/top - That way the browser will use the GPU and animation will be smoother.
  20. Dipscom's post in assign animation to several objects was marked as the answer   
    You can, just use the class selector, you don't even need to create a variable.
    tl.to('.ball', 5, {x:"100"}); You could also feed an array of objects. 
    tl.to([one,two,three], 5, {x:"100"}); Have a read at the docs, there's loads explained there in detail of the many things GSAP can do for you
  21. Dipscom's post in Exit url and youtube progress bar was marked as the answer   
    Hi lynette,
    You can listen for video events and change the z-index of the video and clicktag as needed.
    You can change the z-index with GSAP like this:
    TweenMax.set("#element", {zIndex:3});
  22. Dipscom's post in staggerTo and repeat. increment a tweened value was marked as the answer   
    Hey Liam,
    You'll need to recreate the Tween if you want new values each time.

    See the Pen YpEEVx?editors=1111 by dipscom (@dipscom) on CodePen
  23. Dipscom's post in Animate infinite several elements was marked as the answer   
    Hello Roli,
    Welcome to the forums!
    You said it yourself, the animation is infinite. It has no end. Because you are using a timeline, the second tween is waiting for a previous tween to finish, which will never happen so, it never starts. The same will happen to the third one.
    You can do one of two things:
    1) Have a tween for each of your elements:
    TweenMax.to(red, 3, { rotation: "+=360", repeat:-1, ease: Linear.easeNone, transformOrigin:"50% 50%" }); 2) Set the elements on your timeline to start at absolute times, not relative:
    tl  .to(red, 3, { rotation: "+=360", repeat:-1, ease: Linear.easeNone, transformOrigin:"50% 50%" })  .to(green, 1, { rotation: "+=360", repeat:-1, ease: Linear.easeNone, transformOrigin:"50% 50%" }, 0.15)  .from(brown, 3.5, { rotation: "+=360", repeat:-1, ease: Linear.easeNone, transformOrigin:"50% 50%" }, 0.3);
  24. Dipscom's post in flashing/blinking light with hover pause and alternating flashing lights #MyFirstAnimation was marked as the answer   
    How about this cigar?

    See the Pen ObxWee?editors=0010 by dipscom (@dipscom) on CodePen
    I don't know jQuery so, you will have to adapt. But, you could just use that code as it will work anyway.
    I also would repeat the bit where I said you shouldn't put yourself down so much. I've actually learnt a new trick by reading your code and responding to this thread. So, take it as we're all helping each other at bits we are all bad at.
  25. Dipscom's post in SVG Pieces to form image was marked as the answer   
    Hello ,
    You nearly got it. See the amended bellow:
    TweenMax.staggerFrom(     "polygon",     2,     {         y: function(){      return -620*Math.random()     },         x: function() {       return 420*Math.random()     },         scale:0.5,         opacity:0,         delay:0.5,         ease:Elastic.easeOut,         force3D:true     },     0.01 ); Do have in mind that SVG is not the best option when you start moving a ton of elements in one go. You might see this pen hang right at the start. Consider using canvas for this or WebGL... Even DOM elements will give you a better performance than SVG in this case. Mainly because SVG is not currently offloaded to the GPU.