Carl last won the day on May 22

Carl had the most liked content!


  • Content count

  • Joined

  • Last visited

  • Days Won


Carl last won the day on May 22

Carl had the most liked content!

Community Reputation

7,804 Superhero

About Carl

  • Rank

Profile Information

  • Gender
    Not Telling
  1. Not smooth animations on iPad/iPhone

    SVG filters can be very processor intensive which can yield sub-optimal animation results. If your logos are all the same size (or aspect ratio), you might do better with a bitmap (png) shadow and place it underneath each logo. I'm not exactly sure what the best performing alternative would be here.
  2. Please do not tag users 1 hour after posting to bring extra attention to your issue. Your original post was at 6:30am local time. Everyone here does their best to address the issues as quickly as possible to the best of their ability as evidenced in your other, very similar thread here: Please provide an image or detailed description that clarifies what the difference is between a "curve" and "smooth curve". I don't understand what you are trying to do. Thanks.
  3. Red Progress Slider

    It appears you are using a jQueryUI slider. The benefit of using such a tool is that you don't really have to do much programming to get it to work. The downside is that if you want to customize it beyond what it was designed to do... it can get really messy. To configure your slider to have a red bar grow as it moves to the right you would have to use javascript to inject a red div into the slider and then tween it's width (or scaleX). Unfortunately, jQueryUI customizations are a bit beyond what we can support here in the forums. Someone around here might have a simpler slider that can be customized and configured to be be Draggable and control an animation. Unfortunately, I can't build out a component like that for your from scratch at the moment. We offer GSDevTools for controlling animations:
  4. Split text removing spaces

    Thanks for the demo. SplitText isn't removing any spaces. This is just normal browser behavior. Only 1 space in your code will be honored. If you remove all the JavaScript you will see that there is only 1 space that gets recognized I don't think there is a SplitText solution for this. Someone else may have some suggestions. You may need to inject your own divs or spans with single spaces.
  5. Not smooth animations on iPad/iPhone

    Hi and welcome to the GreenSock forums. I removed the fill and filter from each logo. See if this runs any better. What type of iPhone / iPad are you using (version, iOS)
  6. Move elements on mousemove

    If I understand correctly you could run a loop that tweens every box I suspect at some point the number of elements will impact performance. Hopefully this sparks some ideas. Good luck on your project
  7. Issues with Internet Explorer 11

    Thanks for the demo. The site looks nice too. I have to say I was a bit suprised when I saw the source for the SVG. The artwork could probably be constructed of a dozen or so rectangles and simple paths yet the svg is extremely complex with over 1000 lines of code. I noticed you are doing drawSVG and opacity tweens on every element with a class of "st4"and saw that almost every line in the svg has that class. I ran some code to see how many elements have st4 as class. console.log(document.querySelectorAll(".st4").length) That returns 780. For each path the browser has calculate the length of the path and the update the stroke-dash-array and change opacity at 60 times per seconds while other things are going on. Unfortunately, SVGs do not at all benefit from GPU hardware acceleration. My guess is that IE11 is simply not up to the task. My first recommendation is to recreate the artwork with simpler shapes (even if this requires re-building it from scratch) Second, be sure that you are only animating the lines you need to. You can do this by applying a unique class to only the lines you want to animate.
  8. Particles animation into shape

    Hi and welcome to the GreenSock forums, Our support is focused more on the core features of the GSAP API. As you can imagine it could take many hours to decipher how that code works and then provide a solution for what you are trying to do. If the author of that demo is not you, it might be worthwhile to reach out and see if they are willing to help. There's a chance someone around here may have some idea of how to help, but for practical purposes we can't dedicate our time to trying to solve incredibly complex challenges. If you have a question about the GSAP API, please let us know. We definitely would love to help.
  9. Built-in animations plugin powered by GSAP libraries

    Also, for parameterized wiggles and bounces, be sure to check out the eases CustomWiggle and CustomBounce: As a Club GreenSock member you have access to these powerful tools. I think you will enjoy them.
  10. Built-in animations plugin powered by GSAP libraries

    We don't really have "built-in" effects, but the engine is very flexible and excels at allowing you to create your own re-usable effects. I would strongly recommend reading this article and watching the videos if you need help with the concept of "creating functions that return animations". The general idea is that you can build a timeline consisting of animations that are created via parameterized functions. Below is a very basic implementation of this idea with 2 effects "bounceScale" and "spinAndThenFadeOut" Notice how each box bounces and scales with unique parameters (scale amount, duration) and then each box spins and fades out with unique rotations and speed. //effect function animates an element and returns the tween function bounceScale(element, endScale, duration) { var tween =, duration, {scale:endScale, ease:Bounce.easeOut}); return tween; } //effect function animates an element and returns the timeline function spinAndThenFadeOut(element, spinSpeed, spinAmount){ var tl = new TimelineLite(), spinSpeed, {rotation:spinAmount}) .to(element, 0.5, {opacity:0}); return tl; } // build timeline using multiple effects on multiple elements with unique parameters var tl = new TimelineMax(); tl.add(bounceScale(box1, 3, 1)) .add(bounceScale(box2, 0.5, 2)) .add(bounceScale(box3, 0.2, 1)) .add(spinAndThenFadeOut(box3, 2, 720), "+=0.5") .add(spinAndThenFadeOut(box2, 0.5, 180)) .add(spinAndThenFadeOut(box1, 3, 360))
  11. Convert Flash customease

    Hi and welcome to the GreenSock forums, Are you saying that the ease you need to use too difficult to draw in the JavaScript Ease Visualizer? If so, can you provide an image of the curve you are trying to replicate? The cool thing about the JS version is that you can literally draw an ease path in Illustrator and paste it into the Ease Visualizer. I'm doubtful we have any tools around that will do the conversion you need. We no longer support the AS3 tools, but perhaps @GreenSock has a suggestion.
  12. Run timelineMax on click

    Great demo, Craig. I love how little code there is and how you take the time to make these so nicely responsive too
  13. Hi and welcome to the GreenSock forums, We have a tool called Draggable which lets you drag things: The things you drag have a hitTest() method which allows you to test if the thing you are dragging is overlapping another thing by a certain amount. Here is a basic demo showing how it works. Drag the colored rectangles over the drop area. If you release over the drop area they will stick, if you release outside the drop area they will go back. I'd recommend you experiment with the technique and try overlaying some "drop area" elements (with very low opacity) on your map.
  14. Draggable-Rater

    Hi and welcome to the GreenSock forums, I added code similar to yours to a fork of one of @PointC's demos. It appears to work just fine snapping to increments of 50px Please do your best to provide a very basic example of what you are doing in an online, editable environment like CodePen, jsFiddle, plunkr, etc. To edit the demo above: click "Run Pen" click "edit on CodePen click "fork" replace code in demo above with the least amount of code possible to illustrate the issue. if you can replicate the problem without Angular that would be fantastic. save demo send us the link Hopefully once we can see your demo in an online environment that allows us to easily, view, test and share we will be able to provide some more assistance.
  15. Animating along a portion of a path

    Hi and welcome to the forums. That sounds like a good idea to use MorphSVG to get the bezier data of a path and tween all the elements along the same path. Here is a demo that shows something similar (without svg). Each element is tweened along the same path. Then a timeline is built that tweens the progress() of those tweens to progressively increasing values: With so many elements (ellipses) as you have you probably would want to build a loop that handles most of the heavy lifting. The key for this to work is to have the elements all start at the beginning of the path.