janchristoph.schumm
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by janchristoph.schumm
-
-
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!!!
See the Pen gObrJxN?editors=0011 by studio-firm (@studio-firm) on CodePen
-
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".
- 1
-
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
- 1
-
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
Refresh scroll-controlled timeline on matchMedia?
in GSAP
Posted
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.