Jump to content


  • Posts

  • Joined

  • Last visited

About runejensencom

runejensencom's Achievements

  1. I figured it out. Works perfectly now as I wanted. I just need to add "scale: true" like this: let tl = Flip.from(state, {duration: 1, ease: "none", scale: true});
  2. It works when I scroll below the end-markers, resize window and then scroll above end-markers and down again, then it refresh to correct size. Maybe it is something about refresh, when windows is resizing?
  3. Hi akapowl and Rodrigo. I really appreciate your help. Rodrigo solution works the best with akapowl "end: `bottom-=${box.offsetHeight/2} center`,". Now it works perfectly like I want and it works great in Webflow. I want both box-one and box-two scaling proportional when box-one is pinned to the bottom of the container. But the EM scaling doenst work for box-one like box-two, when I resize the window. Any idea how to fix this? https://codepen.io/rune-jensen/pen/JjvLxXe
  4. I struggle to find a solution with pinned elements flexbox animation from center to bottom, but I have manage to get it to work with ScrollTrigger.create Do you have any suggestion how to make it work? I want the element to pin from center to bottom, when it hit the center of the viewport in the container div.
  5. Hi Cassie I took your advice and study more about GSAP and ScrollTrigger. I find a solution how to pin the element when it hits the center of the viewport, and after scrolling 200vh, it will reverse the animation just like in the demo I showed in the first post.
  6. Hey guys So the code works fine when scrolling down and reverse after center of the viewport. Is it possible to add a pause to the animation, when the viewport hits the top of the container and start reverse after scrolling 200vh? and maybe add more div animations
  7. I also got the same problem in Safari when resizing browser with ScrollSmoother enable. Can I also have this beta too?
  8. One last thing: Is it possible to change the start value "0" - so it counts up from 1953 to 2022 and not 0-100?
  9. Yes, that was exactly what I was looking for. It works great now. Can't thank you enough! Glad to be on board.
  10. Hi guys - my first post here. I am working on a sticky progress bar and a sticky percentage counter for a website in Webflow, that should animate the same time while scrolling from the top to bottom of a section. The progress bar are working fine, but I haven't figure out yet how to get the count number start and end animate like the progress bar. Is this possible with another solution besides using - end:"500px" - in the gsap.timeline like I did? More precise - I want sticky counter number to trigger, when the viewport hits top of the container-large and stop animate, when the viewport hits the bottom of container-large. Hope it makes sense