Jump to content
GreenSock

PointC last won the day on June 18

PointC had the most liked content!

PointC

Moderators
  • Posts

    4,959
  • Joined

  • Last visited

  • Days Won

    400

Everything posted by PointC

  1. Hi sirhclluk You just need an onDrag callback to control the progress of the timeline. I didn't have time to make a CodePen for you, but please check out this thread: http://greensock.com/forums/topic/11161-control-timeline-through-rotation-draggable/ Rodrigo has a nice CodePen in his answer. That should get you started. Happy tweening.
  2. Hi hopekim511 Welcome to the GreenSock forums. The stagger methods are used to create the same animation for each element (or different using cycle) and offset their start times. I don't think there is a way to use cycle for the duration. You'd be able to accomplish your goal with a loop and then use the index to create incremental or random values for the animation. Something like this: $(".box").each(function(i, element){ TweenMax.to(element, i + 0.5, {x: (i+1) * 100, delay: i * 0.1}) }) http://codepen.io/PointC/pen/EgWNqy/ Hopefully that helps a bit. Happy tweening.
  3. Hi elbenja Welcome to the GreenSock forums. You could use stagger on that, but it won't give you the endless/seamless loop you're probably looking for. You'd do that like this: tl.staggerTo('.st0', .3, {morphSVG:'#step1', stroke:'#005F8F', opacity:1, ease: Power0.easeNone}, 0.3) .staggerTo('.st0',1.2, {morphSVG:'#step2', stroke:'#FF1783', strokeWidth:5, ease: Power0.easeNone}, 0.3, 0.3) .staggerTo('.st0', .3, {morphSVG:'#step3', stroke:'#FF298D', opacity:0, strokeWidth:6, ease: Power0.easeNone}, 0.3, 1.5); Here's a fork of your pen with that possibility: http://codepen.io/PointC/pen/GjqKoz/ I'd recommend using jQuery each() and create an infinitely repeating timeline for each element. You can then stagger the start times using the index of the element. That would get you the endless animation like your original with the 6 separate timelines. Like this: $(".st0").each(function(i, element) { var tl = new TimelineMax({repeat:-1, delay:i*0.3}); tl.to(this, .3, {morphSVG:'#step1', stroke:'#005F8F', opacity:1, ease: Power0.easeNone}) .to(this, 1.2, {morphSVG:'#step2', stroke:'#FF1783', strokeWidth:5, ease: Power0.easeNone}) .to(this, .3, {morphSVG:'#step3', stroke:'#FF298D', opacity:0, strokeWidth:6, ease: Power0.easeNone}); }); Here's a fork of your pen with that solution: http://codepen.io/PointC/pen/XjKApg/ Hopefully those possibilities help a bit. Happy tweening and welcome aboard.
  4. Hi essentialtoils You just have a small typo: // please switch this MenuAnimate.to(MorphFrom, 0.2, {morph:MorphTo}, 0); // to this MenuAnimate.to(MorphFrom, 0.2, {morphSVG:MorphTo}, 0); That should get you morphing. Just an FYI - adding questions to a thread that is already marked 'answered' can sometimes get overlooked. It's usually best to start a new topic for your questions. Happy tweening.
  5. Another fix for those weird little pieces is to set a miter limit: stroke-linejoin: miter; stroke-miterlimit: 1; Happy morphing.
  6. Hey swampthang Isn't this a scope issue? You're declaring your gp variable inside your doRotate() function, but trying to access it in your clearVars() function. I think making gp a global variable should make things work correctly for you. Hopefully that helps. Happy tweening.
  7. Hi Robert Wildling Welcome to the GreenSock forums. I'd recommend using a timeline with a repeat of 1 on the tween and then an infinite repeat and delay on the timeline like this: var b = document.getElementById('testGSAP'); var tl = new TimelineMax({repeat:-1, repeatDelay:2}); tl.to(b, 1, {opacity: 1, scale: 1.5, ease: Linear.easeNone, repeat: 1, yoyo: true}); http://codepen.io/PointC/pen/GjgVQR Hopefully that helps. Happy tweening.
  8. PointC

    Where to start?

    Hi TonyWasp Welcome to the GreenSock forums. For beginners, GS has some really great resources. I'd start with these two blog posts: Get Started With GSAP http://greensock.com/get-started-js The Jump Start Guide http://greensock.com/jump-start-js The CodePen collection of jump start animations is here: http://codepen.io/collection/ifybJ/ The docs are extensive and come with many examples: http://greensock.com/docs/#/HTML5/ Other than that, I'd say just fork a few of those starter pens and start trying some simple animations. When you have a question, we're here to help. Happy tweening and welcome aboard.
  9. Hey Bruno, Is this what you need it to do? http://codepen.io/PointC/pen/WGZXdx Hopefully I understood your desired outcome correctly. Happy morphing.
  10. Hi workwave If you want to morph a lot of paths at one time, you can easily loop though them and make that happen. I made a pen a few months ago to demonstrate that possibility. It may prove useful to you. http://codepen.io/PointC/pen/LNLpgB/ Hopefully that helps a little bit. Happy morphing.
  11. PointC

    Animated Mask

    Hi CarpeDiem You can use that shape as a mask or a clip-path. Here's a pen I made a while back to demonstrate basic usage of a mask in SVGs. http://codepen.io/PointC/pen/KzmXYK That should get you started in the right direction. Happy tweening.
  12. Hi MindGamer There is a recent lengthy thread involving gradients and drawSVG that should prove useful to you: http://greensock.com/forums/topic/14743-multi-colored-lines-in-svg/ Regarding the jump you're seeing at the point of origin - you'll probably need two paths to make a seamless loop like that. We had a similar question in this thread: http://greensock.com/forums/topic/12546-seamless-loop-with-drawsvg/ Hopefully those links help a little bit. Happy tweening.
  13. Hi swampthang Is this what you want it to do? http://codepen.io/PointC/pen/vKoGRV Happy tweening.
  14. If I understand your question correctly, you'd like the final x and y positions when the timeline is killed? If so, you can do this: console.log(tween.target[0]._gsTransform.x, tween.target[0]._gsTransform.y); Does that help? Happy tweening.
  15. Hi celopez16 You can spin an element forever like this: TweenMax.to(yourElement, 1, {rotation:360, ease:Linear.easeNone, repeat:-1}) Just an FYI - it's always best to start a new topic for your questions and provide a CodePen for us. Thanks.
  16. Hi Patryk D&D I have a couple thoughts for you. I wouldn't recommend using scrollTo in your tweens with Scroll Magic. The reason being that I think it's quite jarring for the user. They are manually scrolling down the page, hit an invisible trigger and suddenly the scroll bar goes into auto pilot mode and heads for the bottom of the page. The other problem is if you're manually scrolling and hit the trigger, you'll see a tiny little animation as the tween starts, but since you're scrolling manually, the scrollTo() will be immediately killed. If you do want to do that, you'll have to set autoKill to false like this: scrollFull.to(window, 1, {scrollTo:{y:"#three", autoKill:false}}); The reverse problem you described is another reason I wouldn't recommend using scrollTo in the triggered tweens. If you hit the trigger and scroll to section three and then scroll back up, what's the reverse of the window scrolling to section three? There really isn't one so this is problematic and not really the way Scroll Magic was meant to be used. My recommendation would be to place section3 (which is acting as your footer) inside section 2 and position it 100% off the bottom with section 2's overflow set to hidden. Then when section 2 hits the top of the window you can animate the blue section to the top. http://codepen.io/PointC/pen/OXKJQR/ You can certainly use scrollTo and Scroll Magic together, but generally scrollTo is used for navigating up and down the page to specific points. You'll see many sites with a series of circles or dots representing each section and stacked vertically on one side of the page. Those are especially nice for longer pages. That's my 2 cents worth for you. Hopefully that helps a little bit. Happy tweening and scrolling.
  17. If I'm understanding your desired result correctly, you just want to kill() the timeline when either the x or y hits its wall first? I don't know that you need to pass anything to the function. You can just kill() the timeline. http://codepen.io/PointC/pen/LkKqjQ/ Does that help or have I misunderstood something? Happy tweening.
  18. I'm jumping into the middle of this conversation so I could be wrong, but shouldn't you be killing the timeline rather than the individual tween? The way you have your moveKill() function set up, it's only killing the x or the y tween while the other one is free to finish its animation. Have you tried: tl.kill(); //instead of tween.kill(); //in your moveKill() function Hopefully that helps. Happy tweening.
  19. That will be a little tricky when you're animating the strokeWidth. SVG 1.1 will only align strokes to the middle. I think SVG 2.0 will have outer/inner aligned strokes, but for now you'll have to deal with the stroke in the middle. So what's happening is half of the stroke width is expanding to the middle of the circle and the other half is expanding outward. Getting the inner radius to stay put won't work. You have a couple of options: If this is going to be on a solid colored background, you can add a second circle with the same radius as the first over the top and set the fill to the background color. That will hide the part of the stroke animation that is expanding towards the middle. If this isn't going to be on a solid colored background, you could add a mask/clip-path so the inner part of expanding stroke is hidden. Here's a revised version of my pen with a second circle that matches the background. http://codepen.io/PointC/pen/grNzEj/ Hopefully that helps. Happy tweening.
  20. Just to add my 2 cents worth to Sir Jonathan's excellent detailed explanation - quick flashes of content are not unique to GSAP. It's something that has always been around and has the acronym of FOUC - Flash Of Unstyled Content. If you Google that, you'll find plenty has been written about it over the years. Happy tweening.
  21. You could animate scale instead of the radius which would give you the same effect, but the circumference of the circle would not change. Here's a revised version of my pen from above with that option. http://codepen.io/PointC/pen/EyBLQV/ Hopefully that helps. Happy tweening.
  22. I'd echo everything from above. Unless there is a really good reason to use multiple SVGs, I'd stay with one and you'll have less headaches. As Dipscom pointed out, you'll have control of the viewBox and scaling should be a breeze. My best advice would be to take your time in asset preparation. Think about each move or rotation you'll want to make and group your elements accordingly. I find that the actual animation work with large SVGs is quite fast and easy if you've done your homework and prepared everything correctly. Also be sure to give meaningful names to your groups and elements. Otherwise you end up with a lot of .st0, st1, st2 etc which are no help at all. That's my 2 cents worth. Good luck and happy tweening.
  23. PointC

    DrawSVG help

    Hi cwiens@shutterfly.com Yeah - that lettering is a tough one for drawSVG and a mask is going to be a lot of work. The only other thought I had was changing your stroke to something quite thin like 0.25 and then animating the fill of each path as the stroke finishes. It may not be even close to what you wanted, but here's a fork of your pen: http://codepen.io/PointC/pen/JKQNxB/ Hopefully that helps a little or you may have a lot of masking ahead of you. Good luck. Happy tweening.
  24. Hi Carlos, I think Carl is exactly right - everything is working as it should be. When you tell drawSVG to animate to 50%, it will calculate the circumference of the circle. In your particular case that is approximately 628 units. It will then draw to 314. At the same time you are animating the radius by 20% which will increase the circumference by 20% over the duration of the tween - giving you approximately 753. The 314 is only 41.6% of the 753 so it appears that the stroke did not draw to 50%, but based on the initial calculations, it did. Here is your data from above in a CodePen: http://codepen.io/PointC/pen/RRzoOz/ I've set up a console.log to show the circumference at the beginning and the end of the timeline so you can see what I mean. I also added an additional tween to draw to 50%. You'll see that the second tween draws to the new 50% position because the radius animation has completed and the new length can be calculated. Hopefully that makes sense and helps a bit. Happy tweening.
  25. Hi workwave I'm pretty late to the party here, but in answer to your question about 2.05 - there are some syntax changes from earlier versions: //old controller var scrollMagicController = new ScrollMagic() // new controller var scrollMagicController = new ScrollMagic.Controller() //old scene var scene = new ScrollScene() //new scene var scene = new ScrollMagic.Scene() You'll also need an additional file to get it to work with GSAP https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js Here's a fork of Carl's pen which shows all the above changes and uses 2.05. http://codepen.io/PointC/pen/WxqOvR/ Hopefully that helps. Happy tweening and scrolling.
×