Jump to content


  • Posts

  • Joined

  • Last visited

sashaikevich's Achievements


Newbie (1/14)



  1. I'm using scrollmagic to trigger some tweens, but one of the sequences on my timeline I would like to unbind from the scroll speed, and instead animate in miliseconds. I read the solution in another topic - to just create a new trigger, but my elements are off-screen, part of a horizontal animation. What would be a smart way to triggering it? I made a simple demo - I would like to have the 3 elements near the end spin for Xms, instead of their current scroll-bound rotation. Any ideas? (Note, this is not the final animation - I plan to add many more scroll-based animations to the timeline after it) Thanks!
  2. @ZachSaucier, @PointC thanks for the reserources. I've been using add() in the same way for labels (I have yet to do any really complex timelines), but when I saw scrollmagic doing something different, I thought perhaps there's a a resons relating to optimization or clarity of code, or who knows.
  3. I'm familiar with this pattern var tl = new TimelineMax(); tl.to( element, duration, ...) But in ScrollMagic's examplse, the pattern is: var tl = new TimelineMax(); tl.add(TweenMax.to(element, duration ...) (for example here: https://scrollmagic.io/examples/advanced/svg_drawing.html) In which use-case is one approach more suitable than the other?
  4. By chance I found the EXACT animation I want, right here on the custom wiggle page: https://greensock.com/wiggle-bounce There is a demo at the top of the page, and how the circles come together into a larger one, then explode in a single color is the exact animation I had in mind. Can I see the timeline code anywhere? @PointC @Carl (I only got about this far on my own: https://codepen.io/anon/pen/BERGRw )
  5. Come to think of it, this could also work: https://greensock.com/forums/topic/14426-a-way-to-set-movefrom-and-moveto-positions-in-bezierplugin/?hl=bezier#entry61409 - tweening the progress on one big path.
  6. Hi community, I'm planning a complex responsive animation and am at a crossroad... The first scene has about 7 SVG elements revolving around, and converging at a single point (think satellites circling a planet and losing orbit). One way that I thought to do it, is to wrap the elements in individual divs. Then I can give them an absolute position and make them coming to a single point easy. But I don't see a way of having them rotate around a point (like I could do with svgOrigin). Another way, is to just have one SVG, and use getBBox to figure out the locations as @Carl suggested here, but I don't think it's cross-browser and mobile compatible. A third way, since it's only like 7 elements, is to maybe have each element follow a bezier path. I wouldn't be rotating the SVG, I would just have the elements follow a spiralling path. What do you think would be the best approach?