sashaikevich

I've made a complex animation that works perfectly on desktop. Spent about 5 months learning gsap+sm and working on it, and with the help of this community finally got there. But, now that it's live, I discovered that it's absolutely horrible on mobile! For example, - some fixed elements that have fromTo animations, entering from outside the window erroneously appear when scrolled fast on mobile (but behave correctly when user's scroll speed slows) - or the animations that base their calculations on the 100vh miscalculate, because the mobile browser shows, but then hides the url bar and other menus (chrome on iphone) Any good answers / best practice resources that you guys can direct me to? Thanks! (Don't have a codepen example. It's live on my site, but don't know if pasting it here is frowned upon)

If the scroll speed to animation progess is currently at 1:1, I want it to be around 3:2 or even 2:1. SM has the duration value that would normally take care of this, and GS has timeScale, but since the elements are unpinned and since the animations are bound to scroll, neither seems to be of help here. The obvious solution is to pin and offset the container so the container would scroll in the opposite direction to user's scroll. As long as it moves <1px up for every 1 px the user scroll down, the individual animations (children of container) would still trigger. This solution is a bit hacky though (I've updated the pen: https://codepen.io/etamsasha/pen/YzKBOVQ ), so I was seeking some help from experts in my original question. I guess I will continue with this, since it works, and the hacky code only bothers me and no one else I do still have white space that I need to get rid of. The space above is gone now, but there is still the space below added by the pin-spacer element, and visible because I offset the container. Any ideas how I can get rid of it?

I know scrollmagic isn't a greensock product, but I'm hoping there is a parameter in GSAP that I can adjust? I've got an animation I'm happy with, but for the speed. It's bound to the scroll, and it's a bit too fast. Is there a way for me to "slow down" the scroll? https://codepen.io/etamsasha/pen/YzKBOVQ?editors=0010 I created another animation which has a speed close to what I want by pinnning everything and moving it offscreen as the user scrolls, but that comes with its own problems: - my reveal animations are gone (their progess is bound to scroll position) - it's not really responsive. Some rows have more items than others, so different rows get different "on screen" time. - there is extra white space all around my animation https://codepen.io/etamsasha/pen/NWKJgxR?editors=0110 Any ideas?

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!

@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.

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?

@Carl thanks!

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 )

Nice, thanks!

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.

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?