PointC last won the day on June 3

PointC had the most liked content!

PointC

Moderators
  • Content count

    1,322
  • Joined

  • Last visited

  • Days Won

    100

PointC last won the day on June 3

PointC had the most liked content!

Community Reputation

2,748 Superhero

4 Followers

About PointC

  • Rank
    Moderator

Contact Methods

Profile Information

  • Gender
    Male
  • Location
    Seattle area
  • Interests
    web design, motion graphics, 3D animation, video production, all things sci-fi, Mt. Rainier hiking and my dachshunds

Recent Profile Visitors

14,089 profile views
  1. A couple corrections and you'll be up and running. Your custom JavaScript file is named with an underscore, but you're trying to load it with a hyphen. // switch this <script src="js/custom-gsap.js"></script> //to this <script src="js/custom_gsap.js"></script> The tween in your JS file is missing a comma after the duration. // switch this TweenMax.to(".convoy", 2 {left:500}) // to this TweenMax.to(".convoy", 2, {left:500}); Finally, you'll need to set your class positioning to relative or absolute. Add this CSS to your page: <style> .convoy { position: relative; } </style> If you make those changes, everything should work correctly. Just an FYI - you can create a free CodePen account and it will be much easier to help you with future questions and/or problems. Happy tweening.
  2. Using relative positioning of the nested timelines, you can delay their start time or have them overlap. Using a label, you can have nested timelines start at the same time. (more info about labels in the blog post I linked to in my last reply) Here are the basic building blocks of nested timelines on a master and relative positioning. Again, if you'd create a CodePen demo with a simplified version of your question along with the desired outcome, it would be most helpful in getting you the best answers. Thanks.
  3. I'm not sure I completely follow your question, but there are numerous ways to control the start time of your nested timelines. Using the position parameter is usually the easiest. https://greensock.com/position-parameter If you want a tween or timeline to start when another timeline reaches 70%, you can check the progress() of that timeline. https://greensock.com/docs/#/HTML5/GSAP/TimelineMax/progress/ To give you the best answers, we'd really like to see a simplified CodePen demo with information about the desired outcome. Here's some info about putting that together for us. Thanks and happy tweening.
  4. I'm a little confused too. In the balloon example, if you wanted the scaling to happen from the center and have it centered on the path, you'd set the transformOrigin to center. If you wanted it to scale from the bottom of the balloon and have that point follow the path, you could use a yPercent of -100 and transform the origin to the bottom. TweenLite.set("#balloon", {xPercent:-50, yPercent:-100}); tween = TweenLite.to("#balloon", 10, {bezier:{values:motionPath, type:"cubic"}, scale:0.3, transformOrigin:"center bottom", onUpdate:updateSlider}); I'm not sure if that answers the question or not, but depending on what you want to happen, it's usually a mix of transformOrigin and the x/yPercent values.
  5. Hi @ianben Welcome to the forum. As @Jonathan mentioned, you can either load your custom js file or put it directly on the page. If you want it directly on the page, just add the tweens between your script tags like this: <script> TweenMax.to(yourElement, 1, {. . .}) // your tweens or timelines etc... </script> It's not much different for an external script. You just create a JavaScript file and add your tweens, timelines, etc to it. Save it in your js folder and then load it as @Jonathan mentioned above. If it's an external file, you don't include the opening and closing <script> tags in the external file. <script src="/js/custom-gsap.js"></script> // name it anything you like In either case, just make certain you've loaded TweenMax before you load your custom file or scripts with your tweens. Does that help? Happy tweening.
  6. Hi @iconofsyn Welcome to the forum. Using jQuery like example #1 will work just fine. You can also write it like this: TweenMax.to(".someClass", 2, {opacity:0.5}); Pushing the elements into an array like your example #2 is fine too. You can also do something like this: TweenMax.to("#someDiv, #someOtherDiv, #someThirdDiv", 2, {opacity:0.5}); GSAP is quite flexible so there are always many ways of achieving the same result. It all depends on what meets your needs the best. When in doubt if something will work just set up a CodePen and give it a try. Happy tweening and welcome aboard.
  7. Hi @Mast3rmind Welcome to the forum. The problem is CSS related. You're setting all your elements backgrounds to black so the nav-bar is over the top of the logo and title and they appear to fade a second time. You can either remove the black background on line 7 of your CSS or set the nav-bar background to transparent. Either method will fix your problem. Happy tweening.
  8. Wow Carl - talk about going above and beyond for the community. Nice! You should leave a tip jar out on the counter for that level of detailed explanation. Just one of the many reasons why GreenSock rocks.
  9. Hi @alan0buchanan There are a couple options for you. TweenMax.isTweening() or isActive() can check on any active tweens for you. https://greensock.com/docs/#/HTML5/GSAP/TweenMax/isTweening/ https://greensock.com/docs/#/HTML5/GSAP/TimelineMax/isActive/ Hopefully that helps. Happy tweening.
  10. I've never had the need to pull out multiple nested timelines from a master, but that seems like a situation where things could get confusing very quickly. If your users will be making choices that impact the number of nested timelines in a master, I'd probably create all the nested timelines in functions and return them to a new master. That way if the user picks options 1, 3, 4,7, and 9 (for example), you can create a new master on the fly from those functions that create the individual nested timelines. That would seem easier to me than trying to create a master and removing a bunch of the nested timelines. That's just my two cents worth though. Others may have additional advice. Happy tweening.
  11. That's because of the 3rd parameter in the shiftChildren() method -- ignoreBeforeTime. From the docs: ignoreBeforeTime : Number (default = 0) — All children that begin at or after the startAtTime will be affected by the shift (the default is 0, causing all children to be affected). This provides an easy way to splice children into a certain spot on the timeline, pushing only the children after that point back to make room. As you have it right now, that parameter is set to the duration of t3 which is 1 second. That is telling the tweens that start at or after 1 second to shift. That means t2 moves by 1 second and starts at the same time as t1 which is why you see two timelines play at once. What you want in this case is the tweens that start after two seconds to shift. If you switch your code to reflect that change, it should work as expected. master.shiftChildren(-t3.duration(), false, 2); Hopefully that makes sense and helps a bit. Happy tweening.
  12. Hi @olivetum Welcome to the forum. I'm not quite sure what you're asking or what should be happening in your animation, but if you want to target the #text div inside the #logo div, you can use find() like this: TweenMax.to($(this).find("#text"), 1, {. . .} ); Hopefully that helps. Happy tweening.
  13. If you want something to happen once a tween/timeline is complete you would want to put that into a function and use an onComplete callback. Check out some more reading in the docs here: https://greensock.com/docs/#/HTML5/Sequencing/TimelineMax/ Happy tweening.
  14. Hi @TartufoDAlba It sounds like you're looking for the shiftChildren() method. That will allow you to close the gap from the animation that was removed. https://greensock.com/docs/#/HTML5/Animation/TimelineMax/shiftChildren/ Here's a thread with almost the exact same question. Hopefully that helps. Happy tweening.
  15. I'm not sure where you're going with this project, but thought I'd throw out another option. For this type of animation you could also loop through your NodeList and offset the tween/timeline start times via the index of the element. Something like this: That may or may not be of any use to you, but thought I'd mention it. Happy tweening.