Carl last won the day on October 6

Carl had the most liked content!


  • Content Count

  • Joined

  • Last visited

  • Days Won


Everything posted by Carl

  1. Carl

    Rollercoaster movement along a path

    Yeah, what Sahil already posted are the best examples of showing the complexity of what you want to achieve. It's no small task. I also thought of this example from Chris Gannon which is a bit simpler all around but necessarily easy. Just for inspiration
  2. Carl

    GreenSock Mouse-Scroll Elements

    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. 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. 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.
  3. Carl

    Help with transformOrigin

    Great work, Mikel. Nice and simple. just the way I like it!
  4. Carl

    Help with transformOrigin

    SVG doesn't officially support 3D. I'm not so sure your trick of putting a div inside a foreign object inside an SVG is a valid workaround. I think it would be better if you made a reduced test case with just a simple div in an SVG and tried to get it to render the way you want just with CSS (static, no animation). If it is technically possible to achieve, then I would suggest trying to animate it with GSAP. SVG code is a disaster to try to read (not your fault), so it always helps to reduce it as much as possible... for instance there is no need for the carts or even the truck at this point. I would start with a simple rectangle or 2 and work up from there. There are some folks around here who know more about SVG than I do, so perhaps there will be some helpful info for you.
  5. Carl

    Add one animation to another

    Thanks for the demo, but unless your issue is related to React it's really best not to provide something that complex with multiple files, dependencies, code for components and all that. A simple demo will be just fine and helps us better focus on the issue without getting hung up on all the unnecessary overhead. I tried looking at your demo but it wasn't immediately clear how your verticalHandler function was supposed to be invoked. I didn't see a button for that in the UI or any code that called it. That aside, the following demo should meet your requirements as you described:
  6. Carl

    onComplete fires before tween ends completely

    Hi iLuvGreenSock, Sorry, but pasting some css styles into your response does nothing to get us closer to understanding why you think an onComplete is firing early. As Sahil noted it is virtually impossible for an onComplete to fire before its scheduled time. I've also increased the tween duration to 3s and onComplete gets fired 3s while tween started slowly and ends another 3s later. Please provide a demo that clearly illustrates this issue and we will do our best to explain what is happening and offer a solution.
  7. Carl

    How to keep track of tweens?

    Hi and welcome to the GreenSock forums, If your intent is to kill all your animations at once, please see TweenMax.killAll() To track individual tweens, yes you can assign them to a variable or push them into an Array. var myTween =, 1, {x:100}); //and then you can kill or control that animation using common methods such as myTween.restart(); myTween.pause(); myTween.reverse(); myTween.kill(); someArray.push(myTween) Also you can grab all tweens and put them in a timeline that you can then control or kill as a group using TimelineLite.exportRoot() That's a fairly advanced concept and may not be super easy to grasp for beginners. Definitely crack open the TweenMax docs and explore the methods in the left-hand nav. Its a great way to get an overview of the capabilities of the platform and find some stuff you may not know was possible. Don't worry about understanding everything the first time through. Just good to have some mental notes that you can follow up on later.
  8. Carl

    Adding a new slide to THREE image transition

    Hi, I think your best bet would be to reach out to the author of that demo. He's extremely advanced and I suspect he wrote it in a way that could be extended without much trouble. We really have to keep our support focused on questions related to the GSAP API. Digging into hundreds of lines of code that we didn't write can be quite time-consuming and something that we just don't have the resources for. Perhaps someone else will stumble into this and enjoy the challenge.
  9. Carl

    Stopping an animation between two labels

    Thanks for the demo, unfortunately it is incredibly confusing due to the language (we're primarily English-speaking here) and the fact that there are 500+ lines of code. I'm confident your issue could be illustrated with less than 50 lines of code. Perhaps you could make something very small and clear... like you press a red button and something that is the colored red moves. press the green button and the green thing moves. Very simple like that. We don't know what the words Vakantiebudget, eindVakantiekilos, huis, gemisstat3 mean so when we see those as targets of tweens, we have no idea what we are supposed to look for. I'm sure if you can create a super simple timeline or 2 with one or 2 clearly named objects moving around, we will have a better chance of being able to help. Thanks
  10. Carl

    Animating grid items on click

    Thanks for the demo, unfortunately I'm not really following what is happening. Please understand it is very difficult to look through 150 lines of code with no comments AND large chunks commented out for no apparent reason. It seems the core of your issue is that you want an animation to open, revealing somethings and then close via some interaction. I'm certain you could simulate that with a dozen or so lines of code and 2 or 3 elements that reveal and hide. All the stuff about dom elements being populated with different data is just unnecessary clutter. The one area that jumped out as a potential trouble spot is that in your open function you have this code .fromTo(this.DOM.img, 0.8, { x: (rect.boxImgRect.left - rect.detailsImgRect.left), y: ( - },{ x: 0, y: 0 }) .fromTo(this.DOM.img, 2, { width: rect.boxImgRect.width, }, { width: '100%', clearProps: 'width', onComplete: () => (this.isAnimating = false) }, 0); which keeps adding new tweens at a time of 0 to the same timeline. putting new tweens at the beginning of a timeline isn't going to place the playhead at a time of 0 and play the timeline. maybe you need to call restart() also? Its not clear to me why all those values have to be recalculated and why the timeline needs fresh tweens every time. in most cases you would just restart() the timeline again and your open and close would just be a play() or reverse() of that timeline. I suspect that if you can simplify the demo so that you can demonstrate the issue with as little code as possible, we will be better suited to give you more decisive guidance. Also if you are going to revise your demo, please make a fork as it makes it very difficult for people to try to figure it out if it changes. Thanks
  11. Carl

    Animating stop-color of linearGradient

    given this gradient <linearGradient id="MyGradient"> <stop offset="1.281415e-03" stop-color="#FFDD15" id="stop1"/> <stop offset="0.5" stop-color="#EE4036" id="stop2"/> <stop offset="1" stop-color="#9E1F63" id="stop3"/> </linearGradient> you can tween those attributes using the attr plugin"#stop1", 2, {attr:{"stop-color":"red"}});"#stop2", 2, {attr:{"stop-color":"white"}});"#stop3", 2, {attr:{"stop-color":"blue"}}); we warn not to tween stuff in <defs> so its worth testing. In the future please consider providing a demo as it makes things easier to test.
  12. Carl

    Save previous shape, MorphSVG

    I don't see how you can morph shape A into shape B and keep the original shape A on screen without duplicating that path data in the SVG as Blake illustrated. Perhaps you can better explain what you would like to have happen or how GSAP would do this for you. Something to note that is semi-related and not a solution to your problem is that GSAP puts a "data-original" attribute on the target of your morph so that you can easily morph back to the original shape. the data-original attribute stores the original, pre-morph, path data var tl = new TimelineLite({onUpdate:updateSlider}), circle = document.getElementById("circle");, 1, {morphSVG:"#elephant"}) .to(circle, 2, {morphSVG:"#circle"}, "+=1")
  13. Carl

    For all BANKSY fans

    First, one of GSAP's most important features is its ability to help people create animations that tell stories. Your work certainly excels at that. Great job! The reason EGON moves so fast at the end is that he is moving a great distance in a short amount of time I know you know that, but now we have to consider why is the time so short and not longer for the big distance he has to travel. I have to admit I'm having trouble deciphering the walk() function. I see it takes a target parameter, in GSAP the target is the thing that is being animated, but it looks like you are passing in numbers like walk(0.1) walk(0.001) walk(0.25) its ok, to use your own target variable and be number... I just don't know what those numbers represent. I also noticed that you are getting the start value by doing start = egon.offset().left; console.log("start = " + start) If you log it out start you will see that it is always the same. In order to get the distance and speed I think you need to know egon's current position and where he is going to when those tweens are created. I think it will take a bit of tinkering, so hopefully this helps you or someone else get into the proper solution. Again, great job on the animation!
  14. Carl

    'Pulsing' Button could this be done in a better way?

    backgroundColor is a css property and has no meaning in the Animate CC / EaselJS world. You can use the EaselPlugin to animate color effects in Animate CC from the EaselPlugin docs: //tween the tint of the circle to green and scale it to half-size, 2, {scaleX:.5, scaleY:.5, easel:{tint:0x00FF00}}); You can load the EaselPlugin from this CDN URL
  15. Carl

    'Pulsing' Button could this be done in a better way?

    In order to use CustomBounce, you also need CustomEase. And yes, they should both work in Animate CC. The demo Sahil provided should be plenty though for you to experiment and get the exact effect you want. I'm not really sure what that is, but here is another using a yoyoEase which allows you to specify any ease you want for the "reverse" part of a yoyo animation
  16. Carl

    Animate path of SVG symbol?

    I don't think you can target fragments in the shadow DOM. Please read this article
  17. Carl


    Nice work! Thanks for sharing.
  18. Carl

    Change the y value when animation play

    Third problem: I don't see the link to your CodePen Please paste the URL in your reply. Thanks!
  19. Sorry, I'm not really understanding this. It would be of great help if you could create a reduced test case in CodePen as explained here: Leave out ScrollMagic and any related code entirely. Its important to understand first whether or not GSAP is behaving as it should on its own. Thanks!
  20. Carl

    Change the y value when animation play

    Hi Baris, It is very difficult to know what is happening without a live demo. Please create a simple CodePen demo with just enough code to illustrate the problem. If clicking on a button with 3 animated dots and expanding something isn't related to the issue, please leave that stuff out Instructions here: Thanks!
  21. Carl

    Uncaught Can not tween a null target.

    Hi and welcome to the GreenSock forums. Thanks for the demo, but I didn't see any errors. I'm guessing its a security issue as explained by @OSUblake here
  22. Carl

    Scroll wheel question

    Sweet demo, Pedro.
  23. Carl

    SVG Quick Tip: Sliced Text

    That's crazy cool. Nice work!
  24. Carl

    How to make mouse chasing image on link hover ?

    Its very difficult to give general advice on complex UI animations like that without having some understanding of your level of experience and what you have tried. This is why CodePen is so helpful, it gives us a clear starting point in directing you . Directions on using GSAP with CodePen can be found here: I would definitely suggest that you try just getting something follow the mouse on hover first. This demo from @Sahil illustrates a very popular effect that has some similarities to what you want to do. Perhaps it can help you get started. mouseover the little arrow in the bottom left corner.
  25. Carl

    Help needed with animation

    Yes, the site you referenced is using TweenMax. The demo @mikel gave you is a fantastic starting point... if not an end point of what you need to do. GSAP is an animation engine, which means you are still required to write code to tell it what to do, as such it is virtually limitless in its flexibility and complexity of use. Its not like fancybox or some jqueryplugin that automagically takes a few DOM elements and spits out a fully functional widget or slideshow for you. Reading the getting started article should definitely help explain how it works.