Jump to content


  • Posts

  • Joined

  • Last visited

Posts posted by janchristoph.schumm

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



    • Like 2
  2. 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.

  3. 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!!!



    See the Pen gObrJxN?editors=0011 by studio-firm (@studio-firm) on CodePen

  4. 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". 


    • Thanks 1
  5. 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.



    See the Pen vYELqWy by studio-firm (@studio-firm) on CodePen

    • Like 1
  6. 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!



    See the Pen XENBZq by tschingding (@tschingding) on CodePen