Carl last won the day on October 6

Carl had the most liked content!

Carl

Administrators
  • Content Count

    8,962
  • Joined

  • Last visited

  • Days Won

    522

Carl last won the day on October 6

Carl had the most liked content!

Community Reputation

8,557 Superhero

About Carl

  • Rank
    Administrator

Profile Information

  • Gender
    Not Telling

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  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. 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
  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() https://greensock.com/docs/TweenMax/static.killAll() To track individual tweens, yes you can assign them to a variable or push them into an Array. var myTween = TweenMax.to(something, 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() https://greensock.com/docs/TimelineLite/static.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 https://greensock.com/docs/TweenMax/TweenMax() 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 this.tl .fromTo(this.DOM.img, 0.8, { x: (rect.boxImgRect.left - rect.detailsImgRect.left), y: (rect.boxImgRect.top - rect.detailsImgRect.top) },{ 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 TweenMax.to("#stop1", 2, {attr:{"stop-color":"red"}}); TweenMax.to("#stop2", 2, {attr:{"stop-color":"white"}}); TweenMax.to("#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"); tl.to(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 TweenLite.to(circle, 2, {scaleX:.5, scaleY:.5, easel:{tint:0x00FF00}}); https://greensock.com/docs/Plugins/EaselPlugin You can load the EaselPlugin from this CDN URL https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/plugins/EaselPlugin.min.js
  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