Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


  • Content Count

  • Joined

  • Last visited

Community Reputation

0 Newbie

About simo_sultan

  • Rank

Profile Information

  • Gender
  • Location
    Brisbane, Australia
  1. Hi @Rodrigo, Thank you for the feedback. So I have been playing around tonight with your suggestions. I moved the timeline to useRef but I couldn't get it to work with the initial CSS properties and a.to(), however I did manage to get it to work with a.from() and ScrollTrigger on that instance. But this is only for desktop, haven't figured out how to make it responsive yet. However/Also, The word 'writings' just won't play nice at all in the BlogList. It scrolls past the bottom of the page, and I have tried hiding it behind the Footer but it just simple won't hide either. I would lik
  2. That is bloody brilliant thank you @Rodrigo! Massive timesaver! Here's the CodeSandbox Link. https://codesandbox.io/s/laughing-carson-9hjbc Relevant files: src -> projects-> Projects.js (for projectCont ref) and ProjectList for the timeline for 'projects' And src -> blogs -> Blogs.js (for blogCont ref) and BlogList for the timeline for 'writings' So I am back at it again tonight. I am a little closer to my goal but still not sure why certain things happen yet, if it possible to gain some clarification that would be amazing please. So, currently the word Projec
  3. Hey @ZachSaucier, Ah that's ok. I will make a small demo then in the coming days when I get time, that's all good. I know now haha. I saw someone else do this what I did above and thought it might be easier here too. Will update when I get the chance to do it. Cheers again 👍
  4. Hey GSAP Community. UPDATE: I have included the CodeSandbox below in a reply thanks to the great tip from Rodrigo that I can import it So the goal...to have the words PROJECTS and WRITINGS scroll from right side of page to left side of page fairly slowly on the scroll down. I also would like the word/heading to be pinned at the top ideally until the next section (writings) comes into view, then it will scroll up and probably even fade out. And then WRITINGS will scroll across as we're scrolling down and get pinned too for a short time or until the CONTACT div pops up into view or some
  5. Hi @Rodrigo and @ZachSaucier, Thank you for the feedback, I really appreciate the time. I just wanted to let you both know that I haven't tried the Transition Group stuff yet sorry as I moved on to animating another part of my site. And I am thinking I might even just change my plan with the animation altogether. But I will come back to this Transition Group first and try get it to work before I change it. I just didn't want to leave you guys hanging sorry. Will update when I make progress. Simon
  6. Thanks @ZachSaucier for your feedback! I have now updated it to GSAP 3. I knew it was out but I didn't know the syntax changed as I never looked into it. I have now created the CodeSanbox as well. I am still in the process of making it responsive so please view it on a mobile device when you pop it out into a new window. The site should display on any device but just go with a Pixel 2 XL to be safe at the moment hah. Hopefylly I can get @Rodrigo's attention to come take a look. https://codesandbox.io/s/modest-agnesi-xrpmc?file=/src/App.js I tried following this https://stackblitz.com
  7. Hi everyone, First time poster. I see that a Codepen is highly recommended, I am just not sure how to create this react app in Codepen. I will have to look into how to do this next. So. I have been trying to find the solution on the forums to no avail. I can get my animation to play once, but it won't reverse, and it won't play again and I am not sure why. This is the first time using GSAP and timelineLite. What I want to happen is the firstname, lastname and whoButton will zoom off the page, displaying a card with some aboutMe text. Then there is an 'OK' button on that card, which