Jump to content


  • Posts

  • Joined

  • Last visited

craigib's Achievements



  1. Hi Guys, I've built a quick codepen for reference but basically as you scroll down the page text fades in and also the background ( bigger text) image fades in. I've somewhat got it working but I need the active class to be removed on the background image when the next one fades in. At the minute the all just stack. Thanks
  2. Brilliant thanks, I'll get working on it and update with a codepen link if I get stuck
  3. @Rodrigo It's not so much the click and drag effect I need sorry. It's the scrolling timeline I need so as the page scrolls the timeline moves and the background changes. I'll have a play around with the Draggable and ThrowProps though Thanks
  4. Hi guys, So I've only done pretty basic stuff with GSAP at the minute but i've been set the task of building something similar to menu section on this link. http://www.johos.at The scroll timeline thing with changing background / text I just want to know if it's possible to build something similar using Scroll Magic and GSAP? I don't fancy investing a couple of days trying to do it to find out it's not possible.
  5. I'm currently playing around with an animation, I'm trying to get a square to animate down and rotate. The finished position should be a a diamond / rotated 45 degrees. I have 3 squares and I want to show the progress, it's kind of hard to explain but i've nearly got it working just feels laggy. I was 1 box to stop and the next to keep animating from that point. I feel i'm going about it all wrong as there is a lot of duplicate code. Any help would be appreciated.
  6. Hi, I'm trying to achieve a rotating background effect with GSAP, like in this site. http://toyfight.co/ I'm nearly there or at least I think so. Do I need to use the positioning attribute x & y to get the same effect? I've tried different combinations but just can't get it. As you can see mine seems to rotate from the top down rather than bottom up. Like in the example website.
  7. Thanks for that, I thought it might be the case that I need to hide the 2 and create a new one.
  8. Hi everyone, I've been playing around with Greensock the last couple of days and just wondered if it's possible to morph / animate 2 paths into a single path? In the codepen, you'll see I form a square but the way I've done it is with 2 paths. Just purely so I could animate it in the sequence I have. "Up, Right, Diagonal, Right & Up" I couldn't achieve this with a simple square SVG or at least I don't think so. What I want to do next is morph the 2 paths that make a square into a circle is this possible? Hope this makes sense.