simo_sultan

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 like it it to work like the Projects one. Do you have any guidance here at all sorry? Here is the updated sandbox. https://codesandbox.io/s/inspiring-field-btjwc Cheers. Simon.

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 Projects in that section is working close to intention. I would like it to scroll from right to left as I scroll down over the project list (which will get longer as well), and I would like it to fade in as well (I have it set from 0.1 to 0.3 opacity). Then I would like it to stay pinned and disappear underneath the blue container for writings/blogs. The small issues I am getting currently on this one are: - if you scroll slowly the opacity flickers, - on some start points the word jumps a little bit, - on devices smaller than desktop widths the word takes a long time to scroll in My next issue, is that I copy /pasted the code from projects to apply it to the word writings, but I wasn't lucky with that. Issues: - the word is pinned far too far down and then gets pinned at the wrong spot - the opacity flickers here too (unsurprisingly as there is clearly something wrong from projects) - the word sits all different places on different screen sizes (I would like it to eventually just sit underneath the footer box I have or maybe fade out, I haven't decided exactly what to do with it yet as I originally had the idea it would extend past the screen on the left so it scrolls the whole word, but I like how projects is currently handled, although as I don't have another container, I might need to push the word writings off the screen so it doesn't sit underneath the footer) I am open to suggestions with ways to improve it by any means. My current understanding of the timeline is that I initialize and pause the animation, then when it reaches certain positions on the screen I call the next animation. I am struggling to find solutions to my issues seeing as GSAP 3 and Hooks are 'new-ish'. This (unfinished) portfolio site is the one I would like to add to one of my 'projects' to be the one that I use to show industry as I am about to start job hunting soon in Brisbane Australia for my first industry job. Why I'm telling you this, is that any and all feedback is welcome so I can improve.

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 ?

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 something. Both scrolling words will act the same. The issue. So I got the Projects heading to work as intended more or less, but I tried copying it over to the Writings header, thinking it would be the same, but it just keeps playing up and moving/skipping around and I have noooo idea why. I can't get it to be contained in the 'blue' blogs container. Any and all tips are welcome as well. Respective files and code to look into. ProjectList.js in src -> components -> projects BlogsList in src -> components -> blogs Let me know if people need more info to go on. It Thanks in advance. Simon

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

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/edit/gsap-react-hooks-timeline-instance-toggle But it didn't work either. I will take another look at the timeline method then. Thanks in advance for the help!

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 I want to then have the card dissapear (that's working) and then the text to zoom back in to its original position. Does someone mind explaining where my lack of understanding is coming in sorry. Cheers. Simon EDIT: THIS CODE BELOW HAS NOW BEEN UPDATED IN THE SANDBOX LINK PROVIDED IN MY REPLY. const tl = useRef(); // this handles my aboutMe text showing up or not (working) const [showText, setShowText] = useState(false) // this handles my profile photo moving (working) const [animation, setAnimation] = useState(null) // this handles my firstname/lastname/whoButton moving (not-working) const [textAnimation, setTextAnimation] = useState(tl.current = new TimelineLite({ paused: true })) // this goes with the code above (not-working) const [toggle, setToggle] = useState(false); // getting the references of the objects I want to move const profImg = useRef(null); const nameTextFirst = useRef(null); const nameTextSecond = useRef(null); const whoButton = useRef(null); useEffect(() => { // this animation is working setAnimation( TweenMax.to(profImg.current, 1, {y: '20%'}).pause() ) // this animation is not setTextAnimation( tl.current .to(nameTextFirst.current, 0.5, {x: '200%'}) .to(nameTextSecond.current, 0.5, {x: '200%', delay: -0.3}) .to(whoButton.current, 0.5, {x: '200%', delay: -0.15}) ) }, []) function hideAboutMeText() { setShowText(false) animation.reverse() //not working below textAnimation.reverse() } function showAboutMe() { animation.play() //not working below textAnimation.play() // working below setTimeout(() => { setShowText(true) }, 1000); } // not working useEffect(() => { tl.current.reversed(!tl.current.reversed()); }, [toggle]); // not working const toggleTimeline = () => { setToggle(!toggle); };