Jump to content
Search Community

Yannis Yannakopoulos

Premium

  • Posts

    22

  • Joined

  • Last visited

 Content Type 

Everything posted by Yannis Yannakopoulos

  1. Yannis Yannakopoulos
    You can set up a child theme and add your hooks there, so you don't have any issues on future updates.
  2. Yannis Yannakopoulos
    Editing the original theme's files, is never a good idea, as you'd face several issues on future updates. Depending on how the theme loads the scripts, you could add your own hook in yourfunctions.php , dequeue the ones you don't want and enqueue the gsap version you want, along with any other plugins you need. However keep in mind that since this file is called plugins.js, i'm guessing that it may include other libraries as well. So dequeuing that file, might break other functionalities as well. I think the safest bet would be to reach out to the theme's authors and simply ask to update to the latest version.
  3. Yannis Yannakopoulos
    Thank you Jack!
  4. Yannis Yannakopoulos
    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?
  5. Yannis Yannakopoulos
    Makes perfect sense Zach, many thanks for this! Any ideas on maintaining the correct letter & word spacing?
  6. Yannis Yannakopoulos
    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.
  7. Yannis Yannakopoulos
    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
  8. Yannis Yannakopoulos
    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
  9. Yannis Yannakopoulos
    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
  10. Yannis Yannakopoulos
    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.
  11. Yannis Yannakopoulos
    @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.
  12. Yannis Yannakopoulos
    @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?
  13. Yannis Yannakopoulos
    @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.
  14. Yannis Yannakopoulos
    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.
  15. Yannis Yannakopoulos
    https://threejs.org/examples/css3d_periodictable.html the sphere example could be a good starting point for this.
  16. Yannis Yannakopoulos
    Many thanks Jack! It's a great addition, i'm sure lots of people will find this super useful ?
  17. Yannis Yannakopoulos
    Didn't run through the code of the demo, but totally makes sense now. Perfection all the way! Ship it! ?
  18. Yannis Yannakopoulos
    That's just great Jack! One question is, would we still be able to pass an object or a function to the stagger property, in order to have more control over the reveal effect's order? Or would this need to be passed somehow in the batchCallbacks method?
  19. Yannis Yannakopoulos
    Thank you for the clarification Zach. Personally i feel would be better to wrap everything scroll-related around ScrollTrigger, instead of having another component for the stagger-reveal-effects, using IntersectionObserver. But i do get the extra kb concern. Maybe an optional plugin of the plugin? ? In any case let's see if anyone else is interested and hopefully it could be included in a future release.
  20. Yannis Yannakopoulos
    Hello and first off congrats on the the release of ScrollTrigger, it's definitely a game changer! Are there any plans for adding stagger in ScrollTrigger? Would be really useful for reveals on a grid, where you'd want to stagger the reveal of each element when entering the viewport.
×
×
  • Create New...