Jump to content

Yannis Yannakopoulos

  • Posts

  • Joined

  • Last visited

About Yannis Yannakopoulos

Contact Methods

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

Yannis Yannakopoulos's Achievements

  • Week One Done
  • One Month Later
  • One Year In

Recent Badges



  1. That's really cool Jack and it does help indeed 😀 Only point being that SplitText doesn't follow the right letter & word spacing of the initial phrase. Would you say that this is something i could tackle with CSS or SplitText settings, or is it a timeline issue?
  2. Makes perfect sense Zach, many thanks for this! Any ideas on maintaining the correct letter & word spacing?
  3. Thank you @akapowl i did try .reverse(), but i don't think it's the way to go for this one. If you hover the element and stay for 2 loops, reverse will play backwards twice.
  4. Hello! I want to layout some text on an SVG path and have an animation play in a loop, on hover. On mouse out, the text should go back to its initial state. I used SplitText and the MotionPath plugins in my CodePen and it looks kind of what i want, but i have the following issues: Timeline related: The intended initial layout, is the one you'll see if you comment out addPause (line 44). I thought i'd probably need to change the startTime of the timeline, but that's not working. What am i missing? On mouseout, i'd like to tween the timeline to its initial state (the corrected initial layout), but again not working as expected. Any ideas? SplitText & MotionPath related: Right now the letter & word spacing is off. It's tight to the stagger values. So how can i maintain the default ones? (This animation is intended to work with words of different lengths). Is there a callback i could use onResize that would re-calculate the correct position of the letters? Any help in any of the above would be much appreciated Thanks in advance
  5. Just an addition to what Zach suggested , for this part of your question: If i understand correctly, you want to link the progress of the animation to your scroll? If so, you can just use scrub: https://codepen.io/neundex/pen/xxOVVaW?editors=1010
  6. I see. In general there are many ways of doing this, but for now i'll stick to the logic of the Codepen you included. Here is a simplified fork, with only the bare minimum: https://codepen.io/neundex/pen/BajGvxv?editors=0110
  7. Codrops have a few demos with this effect. You can take a look at this one for example: Creating a Menu Image Animation on Hover In this case, the empty img tag serves as a placeholder for the effect. Notice the data image on each list item. When each item is hovered, it grabs its data-image attribute and sets it to the placeholder image.
  8. @adamoc that's a lot of code to digest easily. Maybe if you could provide a reduced case, i could understand better. However, taking a quick look at your code i think your main issue is more in the architecture of the code, than it is about ScrollTrigger. I noticed you are initialising Barba.js inside your homepage.js file. Not sure what your structure is, but provided that homepage.js is only used on homepage, that approach is wrong. You should have something like a main.js file, which will contain all your Barba.js related functions and then use Views for any page specific logic. Take a look at the docs, they have some great details.
  9. @GreenSock point 1 makes perfect sense. Question: is there a best practice you'd suggest for handing multiple instances on the same page? Performance wise, could we reach a pitfall?
  10. @2malH i also don't get the doesn't destroy it as expected part. However to give you a clue on what's happening and maybe you can work it out, the selectors you're using (.portfolio__heading, .portfolio-img__plane) need to be reselected after each page transition. What i'd suggest is wrap the whole logic of initialising your timeline & ScrollTrigger, in a function, or a Class which, would have some init & destroy methods. On init you could pass as arguments the elements you want to animate and on the according event (when the new DOM is added on the page) you could re-run init to grab the new elements added on the page and pass them to gsap (after destroying the previous instance). That being said and given the fact that you use Semplice, maybe it's a whole lot easier for you. Checked their docs to find the relevant events, but i came up with this: https://help.semplice.com/hc/en-us/articles/360035699552-Single-Page-App-Behavior. So there is an option to run some custom code either once or after each page transition. So maybe you could try adding your code with that option enabled (after each page transition) and see if it works.
  11. That's expected behaviour and indeed is related to Barba.js. When you first load a page, everything is there for ScrollTrigger to pick up. Meaning the DOM does have the elements you pass to ScrollTrigger. When you navigate to a page using Barba.js, the DOM changes (the old container is removed and the new is added) and ScrollTrigger (or any other script), can't 'listen' the events of these newly added elements. You have to destroy the previous instance of ScrollTrigger and reinitialise it, passing it the new elements. Barba gives you several hooks to work with (i believe the one you need is beforeEnter) so on that hook, you could use the next object, to find the new elements you want to pass to ScrollTrigger. Something like this: beforeEnter: ({ next }) => { const items = next.container.querySelectorAll('whatever you want') }, You can check the docs, they mention how to work with third party scripts. You need a similar logic with this. Regarding your second question, i believe you don't need ScrollTrigger at all (or either headroom.js). You can use your own function to detect if the user scrolls up or down and then use gsap for the animation of the header. Be sure to hook your function in requestAnimationFrame or gsap.ticker for better performance on scroll.
  12. https://threejs.org/examples/css3d_periodictable.html the sphere example could be a good starting point for this.
  13. Many thanks Jack! It's a great addition, i'm sure lots of people will find this super useful 🙂
  14. Didn't run through the code of the demo, but totally makes sense now. Perfection all the way! Ship it! 😀