Jump to content
Search Community

Craig Hildrew

Members
  • Posts

    6
  • Joined

  • Last visited

Everything posted by Craig Hildrew

  1. Hey Again, I am having some issues with my layout when switching between sizes using ScrollTrigger.matchMedia. I have some animations that trigger at "(min-width: 1000px)" || "(max-width: 999px)" || "all" The animations work correctly when loaded in a given view port, but when reducing the screen size below the 1000px mark the pinned text elements are not visible, but become visible is refreshed at that screen size. I'm wondering if theres something that will trigger the refresh like behaviour on the switch between matchMedia cases. any help you can provide is much appreciated https://codepen.io/bluemonkey1130/pen/WNzWJNZ
  2. Yeah it's resolved, lesson pin siblings https://codepen.io/bluemonkey1130/pen/WNzWJNZ
  3. I think I have resolved the clash of pins https://codepen.io/bluemonkey1130/pen/KKoOxrX
  4. Hi I had tried it with greensock pinning, but as I was already pinning the parent image panel I thought it might be simpler to allow css to handle that bit if possible, it was quite close. I've since made a couple simpler versions of what I'm trying to do, focussing on just the left image panel from the previous example, with the text element inside. I have had some success pinning the text element to the bottom of it's parent, see "Simple Pin" as good example of the kind of behaviour I am trying to achieve. However if I also pin the parent, see "Pinned Parent With Child" which is what I ultimately need to do. I've created a simple example with just the pinned text within the image panel And a second with the parent image also pinned Maybe I'm approaching it wrong, please let me know if thats a clear enough explanation. SIMPLE PIN https://codepen.io/bluemonkey1130/pen/xxWvpeB PINNED PARENT WITH CHILD https://codepen.io/bluemonkey1130/pen/RwMXxqP
  5. Hey, Love your work Greensock! I need a little guidance/ advice The animations work as intended, the issue is regarding the text inside the left hand image panels; specifically their behaviour when scrolling up the page. Effect is best seen on larger screen sizes I'm using css flex & position sticky to "stick" them to bottom of their parent, greensock just reveals them at the correct time. All works on the way down, but as you scroll back up weird things happen to the positioning of the element. I'm hoping somebody has a simple solution, as it is very close using this approach. Alternatively could use green sock to also handle the pinning Many Thanks
×
×
  • Create New...