Carl last won the day on May 25

Carl had the most liked content!

Carl

Administrators
  • Content count

    7,773
  • Joined

  • Last visited

  • Days Won

    468

Carl last won the day on May 25

Carl had the most liked content!

Community Reputation

5,752 Excellent

3 Followers

About Carl

  • Rank
    Administrator

Profile Information

  • Gender
    Not Telling
  1. Thanks for the demo, very helpful. I think smoothChildTiming:true will help. Docs for smoothChildTiming: https://greensock.com/docs/#/HTML5/GSAP/TimelineLite/smoothChildTiming/
  2. Sorry for the delay. I was hoping someone would be able to jump in with some sort of a solution. I believe the root of your problem is exactly where you illustrate it above: SETTINGS object can't reference values nested in objects inside it while it is being constructed like: SETTINGS.intro.topics.singer.btn.params.initialPosition Like you guessed, I'm pretty sure you will need to build the SETTINGS object and then populate it with those values.
  3. Hi and welcome to the GreenSock forums, I recall there being some issues with EaselJS not honoring any scripted control of masks but I haven't looked into it in a awhile. Might be worth asking the CreateJS or Adobe Animate folks if masks created on the timeline can be controlled via script. If yes, than TweenMax should be able to do it. I'm moving this question to the banner forum as there are more Animate CC users in there.
  4. My guess is that it would be better to create the artwork at the size you need instead of scaling it up. It appears your dude starts pretty small. If you are going for a "big chunky pixels" look I'm doubtful you will notice any blurring of anything while the images are moving, especially in the erratic fashion you are going for with the jetpack
  5. Yeah, that seems to be a sound approach. Nice job. If you're timeline is set to yoyo:true and you click the red button during the yoyo (backwards) phase it immediately changes direction and moves forward. Your method works for your particular case, but there are different use cases to consider when adding methods like this and how to make them flexible enough to make sense for everyone. We're pretty protective of the filesize of the tools and usually only add to the API unless there is a large need for a feature that can't easily be accomplished with the existing methods available. In this case it doesn't seem to be something that comes up often but we'll keep our eyes and ears open. Thanks for the suggestion.
  6. Hi and welcome to the GreenSock forums. PathEditor is just a utility that we use internally for our own purposes such as the Ease Visualizer. PathEditor isn't a tool that we promote or support.
  7. Happy to help. No, you can not have 2 tweens trying to change the y of the same target at the same time. Use a wrapper. Yes, you can use an onRepeat callback to check if someone hit the pause button, but that would only fire every 2 seconds (based on the duration of the tween in my demo). Another option is just to tween the time of the wiggle timeline back to 0 very quickly. try using this in my previous demo: $(".dude").click(function(){ if(!tl.paused()){ tl.pause(); // tween the time() back to 0 TweenLite.to(tl, 0.2, {time:0}) } else { tl.play(); } })
  8. The onComplete callback functions are setup so that this inside the callback refers to the tween that called the function. So knowing that you can do this.target to get the element that was being tweened. Also you can pass in the special string "{self}" in your onCompleteParams, but Its easier just to use this in the function. Both methods are illustrated in the resetText function below (open the pen in a new window and view console).
  9. These are all great solutions, and traditionally I would recommend the same approach of creating a function that creates a random motion tween that calls the function again using onComplete. However, CustomWiggle can do a lot of this with very little code. A CustomWiggle always returns back to the start values. https://greensock.com/customwiggle This demo should provide constant random movement and return to normal position on pause. You can easily change the number of wiggles and adjust the max distance he travels (change x and y in tweens). Also check out random swarm which was accomplished using the same basic technique
  10. No trouble at all. Glad you got it working.
  11. I'm having a very hard time understanding the description of your animation, especially since tl1 and tl2 don't exist anywhere. Perhaps you meant mc1 and mc2, but those are timelines and don't have a visible property. Regardless, you can control one timeline from another a few different ways. As Oliver suggested you can just invoke play() using function or callback. You can also use use add() with tweenTo(), tweenFrom(), tweenFromTo() on TimelineMax instances: For ultimate flexibility you can tween the time() or progress() of another timeline like:
  12. It would be very helpful if you could take a few minutes to set up a reduced test case as explained here: One option might be putting your menu inside a parent container div with the higher z-index. Once we can see a small demo we will be better suited to provide a solution that works in your particular scenario.
  13. Sorry for the confusion guys. Must have had a paste fail last night. The he first post Mikel had suggested was the one I meant to share
  14. Sorry, we don't have any tools that do all that for you. GSAP wasn't meant to be a full-blown physics engine. There are certainly tools like VelocityTracker that will assist you in getting the current velocity of objects so that you can figure out new velocities after a collision. You might get some ideas from demos like: Calculating new velocities for 2 circles that hit each other from opposing angles at different speeds is going to require a fair amount of trig / physics that is beyond the scope of what we can help you with.
  15. How to create a scroll driven animation seems like a much different question than what you were originally asking. The easiest way to go about this is to learn ScrollMagic which is a very robust api for controlling GSAP animations via scroll. http://scrollmagic.io/examples/ Check out Petr Tichy's ScrollMagic resources: https://ihatetomatoes.net/?s=scrollmagic&post_type=post&ref=5 Blake has posted often about controlling animations via scroll without ScrollMagic so you could try to re-engineer some of these to suit your needs: and be sure to read this post where Blake talks all about normalize, lerp and clamp and there are a bunch of great videos to watch too.