janchristoph.schumm

Thanks so much for your superfast replies! That's a huge help. I guess you're right … I might as well go without those smooth transitions on layout change. The core idea behind all of this is that I will have variable typography in those menu-items and a timeline, that tweens font-stretch and font-weight. Progress is calculated in between certain aspect-ratios to make the the font fit whatever screen-size it is displayed on. This alone is actually working pretty well.

Hey Zach, thanks a lot for your suggestion, but it doesn't seem to do the trick. The problem occurs when I scroll up just a bit and the scrollTimeline hasn't reached its final state. When at this point I resize the browser to match the other aspect ratio and then continue scrolling, I want the menu-items to not jump to previous position/size, but to smoothly transition to the size/position, they would have at this point/progress on the timeline for this aspect ratio and then continue (by scrolling) from their new position/size to the final state in the scrollTimeline. Pretty confusing! ? I hope, you can follow.

Hello again, I'm trying to create a page, where the menu at first is displayed as a grid but gets shifted to a horizontally aligned top-menu-bar by scrolling. I'm using the scroll-position to control the progress of the animation. That in itself is just working fine. However, there's one more thing I'm trying to include. I've already searched the forum for a clue, but it seems that I just can't get my head around it … Whenever a certain aspect-ratio is met, the menu-items change their proportions – there are timelines for each aspect-ratio to create a smooth transition here . This again also affects the scroll-based animation. So, if I scrolled halfway through the animation, then resize the browser until the change happens, I'm able to tween the menu-items to where they should be based on the new aspect-ratio and the actual progress of the timeline. But if I continue scrolling from there, it always jumps back to the "old" proportions. If someone could give me a hint on this, that'd be supernice! Many thanks!!!

Hey, thank you for your responses, Zach and Mikel! What I'm trying to achieve is a fluid grid-layout, that changes on different aspect ratios by smoothly transitioning the percent-values. I found, that if I target the elements directly with a single tween for each, it works as expected. Also, by changing the percent-values to "vw" inside the above timeline, I can get it to work as well. I'm having no problem with percentages in "height" and "top".

I'm having problems animating a grid-like structure. In my CSS, I'm defining basic percentage values of some fields within a container and I'm using a timeline to tween proportions. But there's a problem with the values calculated at start, e.g. ".firm" has a CSS-defined value of 40% and should be tweened to 20%. This works as long as it is the first tween (on the first line) of the timeline. However, if I put the tween of ".studio" on the first line, ".firm" starts tweening at a width of "60%", which is the CSS-defined value of ".studio" – this also applies vice versa. I'm certainly missing a very basic thing. Maybe someone could have a look into the Codepen and correct me.

Hi everyone, I'm trying to get a TimelineMax sprite animation of an SVG-Background to play while throwing the container. Basically, I was planning on using "getVelocity" with "onThrowUpdate" to trigger the playing of the timeline/the movement of the background-image from the start position to the end position (which is calculated via a function), if progress of the timeline = 0. Unfortunately, I can't make it work properly. At first, the timeline/sprite-animation started only after the throw-movement had stopped. Now, in the codepen, the animation isn't working at all – I figured out, that it has to do with the "backgroundPosition: getClip(9, 4)" in the second "fromTo"-Tween of the timeline, but I can't figure out why. What am I missing out? Any help is very much appreciated!!! THX!