Jump to content
GreenSock

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

Yannis Yannakopoulos

ShockinglyGreen
  • Content Count

    14
  • Joined

  • Last visited

Community Reputation

28 Newbie

About Yannis Yannakopoulos

  • Rank
    Member

Contact Methods

Recent Profile Visitors

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

  1. 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
  2. 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.
  3. @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.
  4. @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?
  5. @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.
  6. 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.
  7. https://threejs.org/examples/css3d_periodictable.html the sphere example could be a good starting point for this.
  8. Many thanks Jack! It's a great addition, i'm sure lots of people will find this super useful 🙂
  9. Didn't run through the code of the demo, but totally makes sense now. Perfection all the way! Ship it! 😀
  10. 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?
  11. 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.
  12. 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.
×