PointC last won the day on May 22

PointC had the most liked content!

PointC

Moderators
  • Content count

    1,301
  • Joined

  • Last visited

  • Days Won

    98

PointC last won the day on May 22

PointC had the most liked content!

Community Reputation

2,690 Excellent

3 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

13,548 profile views
  1. Hi @blaasvaer I don't know if you typed that code snippet or it's a copy and paste from your actual project, but there are typos in two tweens. You're missing a closing quote mark for the tween targets and a comma between the target and the duration. //this TweenMax.to('.logo span.one, .logo span.three duration, { opacity: 0, ease: Power0.easeNone } ); // should be this TweenMax.to('.logo span.one, .logo span.three', duration, { opacity: 0, ease: Power0.easeNone } ); The same typo is present on the span one and span three tween in the else statement. I'm not sure if that is the problem without seeing the actual working code though. As @mikel mentioned, a CodePen would be most helpful. Happy tweening.
  2. Hi @rgfx That's what I would expect. The playhead is at the 0 position when you log it. Are you possibly thinking of duration? The duration of that timeline would be 2. duration() is a getter/setter for the timeline duration: https://greensock.com/docs/#/HTML5/GSAP/TweenMax/duration/ time() or totalTime() are getters/setters for the playhead position https://greensock.com/docs/#/HTML5/GSAP/Core/SimpleTimeline/totalTime/ Hopefully that helps. Happy tweening.
  3. Looks like @mikel & @Shaun Gorneau have you pretty well covered on how to do this animation by adding some classes, but I thought I'd throw out another suggestion so you'll have some options. If you want to animate part of the array and it's sequential, loops are great for that type of work. Instead of using a stagger tween, you can loop through the part of the target array that you want to animate and use the variable from your loop count to create a delay for each tween. You could also use this method to create new tweens and add them to a master timeline. Here's a really basic example of how that works. Using this method, you wouldn't have to add a new class to your elements. As I mentioned though, the elements need to be sequential for this to be a good option. I find the majority of my SVG animation work really involves asset prep and planning. If you've got elements semantically ID'd , in the right order and grouped correctly coming out of your vector software, the actual tweening is much easier. Hopefully that helps a little bit. Happy tweening.
  4. I'd look at using stagger for something like that with a .01 offset (instead of the delays you currently have). I don't have time to fork your pen at the moment, but here's some info on stagger. https://greensock.com/docs/#/HTML5/GSAP/TweenMax/staggerFrom/ With stagger, you can do that whole animation with one tween. Happy tweening.
  5. Your path is moving outside of the SVG viewBox. To fix that you could animate the x position of the entire SVG or you can set the svg overflow to visible in your CSS. Happy morphing.
  6. Hi @iammarkmulvey Welcome to the forum and thanks for joining Club GreenSock. You're targeting a group for your morph, but the plugin works path to path. To fix this, move your IDs from the groups to the paths within those groups like this: <path id="Finger1" class="st0" d="M-214 570.4c0-4.7-2.9-6.7-6-6.7 -3.5 0-6.3 2.4-6.3 5.6v5.9 -13c0-3.1-1.4-7.3-5.8-7.3 -4.2 0-6 2.3-6 6l-0.1 10.6 0.1-15.9c0-3.1-4-5.7-7.1-5.7s-6.1 2.7-6.1 5.8v11.6 -41.9c0-3.1-2.9-5.7-6-5.7s-6 2.5-6 5.7v55.5l-4.8-13.9c-0.7-2.8-4.4-4.9-7.2-4.2 -4 1-5.1 4.4-4.6 7.5 0 0 4.8 17 4.9 17.7 3.2 17.2 12.9 31 30 31s31.2-13.9 31.2-31L-214 570.4z"/> <path id="Finger2" class="st0" d="M-214 570.4c0-4.7-2.9-6.7-6-6.7 -3.5 0-6.3 2.4-6.3 5.6v5.9 -13c0-3.1-1.4-7.3-5.8-7.3 -4.2 0-6 2.3-6 6l-0.1 10.6 0.1-46.1c0-3.1-4-5.7-7.1-5.7s-6.1 2.7-6.1 5.8v41.8 -8.9c0-3.1-2.9-5.7-6-5.7s-6 2.5-6 5.7v22.5l-4.8-13.9c-0.7-2.8-4.4-4.9-7.2-4.2 -4 1-5.1 4.4-4.6 7.5 0 0 4.8 17 4.9 17.7 3.2 17.2 12.9 31 30 31s31.2-13.9 31.2-31L-214 570.4z"/> You actually don't need the paths to be in groups so you can delete the group wrappers if you like. Once you move those IDs, switch your morph tween to this: TweenMax.to("#Finger1", 1, {morphSVG: "#Finger2", ease:Power1.easeInOut}); http://codepen.io/PointC/pen/532712e3a929eb11cb600b34ecfe6ecd/ That should get you working correctly. Happy tweening.
  7. This thread may be of interest to you as well. Happy tweening.
  8. Hi @Joostan IE and Edge are quite picky when it comes to drawing circles. One solution is adding an attribute for the stroke-dasharray. Another is converting the circle to a path before animation. (This is done with the MorphSVGPlugin.convertToPath() method). I actually started a thread on the topic of drawing circles last month and that lead to a lengthy discussion about it. We discussed various workarounds as well as converting it to path. I think there would be a lot of helpful information in there for you. Hopefully that helps. Happy tweening.
  9. Hi @Noturnoo You'll need to make a few changes to get this working correctly. In your jQuery each() loop, you're targeting all the images and all the .cover classes so everything will trigger at the same time. It would be better to target your wrappers and find() the .cover and image in each of those elements. That way, each animation operates independently and only those elements in that particular wrapper will animate. You're missing a script that allows ScrollMagic to control the GSAP animations. <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js"></script> Your trigger hook is set at 0.7 so animations 1 & 2 will fire immediately on page load because they are past the trigger. I'd recommend adding the indicators when working with ScrollMagic. They can verify that everything is where you wanted it or can reveal problems. Here's the link for that script. <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script> Here's a fork of your pen: Hopefully that helps. Happy tweening.
  10. @mikel That gave me a good laugh.
  11. You were using Linear for all your tweens so I just set a new default to save some typing. It's not necessary, but when your project is using a specific ease multiple times, it can be helpful to set a new default. Every tween after that will use the new default if you don't specify one. You can still override it on individual tweens whenever you like. Happy tweening.
  12. I just tried two devices -- one iOS and one Android. I couldn't get it stuck either.
  13. That can sometimes happen. That's the Wild West of SVG. If you have paths in an illustration that are next to each other, styled exactly the same and don't need to animate separately, I'd recommend merging them in Illustrator before export. If you use the Pathfinder tool, you can merge, unite, intersect etc... The simpler you can make an SVG, the easier it will be to manage. That's my two cents worth. Others may have additional advice. Happy tweening.
  14. Duplicate thread. Locking this one.
  15. Hi @Semblance Looks like you're getting pretty close to what you want. When you have some action that is going to happen over and over, you can make the code do the heavy lifting by using a loop. In your demo, we can loop through each of the tulip groups and create the animation for that group. That timeline is then added to a master which is repeated as much as you like. I used a variable for the duration and the position of each timeline on the master so you can adjust those to your liking. I'm not sure if this fork of your demo is exactly what you wanted, but it should get you started. Regarding your question about the 0 at the end, that is the position parameter. As @mikel mentioned, you can read more about that here: https://greensock.com/position-parameter Hopefully that helps. Happy tweening.