lagalga

i've tested using scale instead of fixed width, it resizes horizontally but it doesn't reposition vertically https://codepen.io/lagalga/pen/jORoWay I'll try with Flip, let's learn!

the thing is at start, before the animation starts, it don't resize, although the width is set to width: calc(100vw - 100px). I do need those widths: based on width at start AND 236px at the end… making the value change with scale would involve a formula based on the width of the screen which in the end should result in a value of 236px https://capture.dropbox.com/mpWJ5kxvlCb7CD2F

one more thing, sorry… how do i resize the logo width with window resizing? I've set it to a portion of vw… and when i resize the window, the logo stays the same size

oh, you did it! thank you. I just updated the codepen, but trasnferred the solution to my wordpress develop site and it runs like butter. Thank you so much

i've just changed 150vh with : const vh = (coef) => window.innerHeight * (coef/100); … start: vh(133) + ' top', And it triggers well… the thing is how to hide/show the logo simultaneously with the header? If i set the same animation, the logo doesn't do the first (shrink animation) https://codepen.io/lagalga/pen/poBmoav

i don't know if this is the place to post my question, i think it's related… I have based on the first code to hide the header when scrolling down and it appears when scrolling up... but I also have an animation of the logo at the top of the page and I don't know how to join the 2. The sticky header and the logo are in separate divs, although after the first animation they seem together... but I want that when a 150vh of scroll down is done, the header + logo set is hidden upwards, and that they appear again when scrolling up... all always in the area below 150vh from the top of the page... This is what I have arrived at: https://codepen.io/lagalga/pen/poBmoav Orignal topic

Maybe is it that, but black instead of red?

Thanks I was stuck on doing it with gsap.from and this is simpler 😅 Sometimes you are so deep into something and you don't see that the solution is simpler

Hi! one more twist... is it possible to have an initial logo size relative to the width calculated with css variables* and after the animation the size is fixed in pixels? I mean: From-> width: calc(100vw - var(--borde)); To-> width:250px; Thanks

Hi! sorry i've been out and im' seein again now. Gonna try first one, @Rodrigo and simplify my codepen, @mvaneijgen. I'll post it today or tomorrow Thank you

Hi, I am trying to create a group of sections within which there is a horizontal scroll, and when it ends then another new section appears vertically that overlaps. But if I use sticky it only works the first time? I'm doing it in wordpress(Divi), but with a simple demo based on @LukasZahorec' I don't get it... should I create a tween above the horizontal scroll sections for the vertical sticky behavior? https://codepen.io/lagalga/pen/abXgwvJ WP: ( https://temp.espaciotramo.com/loop-plato-prueba/ )

Hi, it's me again. I thought I had solved... but it doesn't work on mobile. Also, the 40% section is getting "shorter" because above comes the 3rd section more and more above .... I have created variables for .panel60 and .panel40 but I don't know if I should create a function for each of them? Also, in mobile, they should be all full width sections, but the third section is not visible, it only does the scroll trigger with the .panel60 and .panel40 sections.... What am I doing wrong? Updated Codepen: https://codepen.io/lagalga/pen/OJrvKML I have this on a wordpress site, with Divi theme: https://temp.espaciotramo.com/

Thnk you. I suppose i need to use   instead of regular spaces… and who do i animate this on scrolltrigger, not automatically with hover?

Yep, sorry. I forgot to mention i need a constant font size, not resizeable with viewport… so if the section is 100vh, the path somatimes would be more horizontal and sometimes vertical… deforming the path, changing the font size and its glyphs proportion (https://codepen.io/lagalga/pen/OJrZVwO). So I saw this post and thought i could set a simple path (two perpendicular lines, a corner), where the text moves on scrolling (not animated like this post), but not realizing where to start: https://codepen.io/lagalga/pen/abPGLQb

Hi! I'm trying to set something similar but cannot make it with textPath because of svg redimension… I'd like to animate a text on a simple path on scroll, like this: https://www.dropbox.com/scl/fi/z9phi9hvkg1k415lpypqj/text-animation.mov?rlkey=n2jobltwtkp4fe6hjduw558hi&dl=0 Do I have to use SplitText? I've tried forking your codepen but the text gets mixed…

Sorry, I solved it while writing it. That's why I marked it as solved. I've been updating CodePen and that's why it looks good. Sorry for the inconvenience

Thnk you, @mvaneijgen, but in my codepen the effect is right. Maybe with duplicated code. Sorry i don't fully understad yet all gsap settings, it's while trying when i'm learning ?. I'm setting this for a wordpress site, with Divi, and i've reached this: https://temp.espaciotramo.com/prueba-home/ And updated the codepen: https://codepen.io/lagalga/pen/OJrvKML

Hi! i want a horizontal scrolling section with sticky cards moving right to left… but then another section with the reverse movement… I reached to this page: Where there is the first part, but cannot set the next section with the opposite direction movement… I've tried setting flex-direction:row-reverse, but cannot find what i need to change on the xPercent var…