Jump to content


  • Posts

  • Joined

  • Last visited

aok's Achievements

  1. I'm unsure if there is a solution to this but just wanted to query it. I'm doing a simple fade in/out of background image on hover of menu links using two methods (mouseenter and mouseleave) (it also fades out other menu links but that's unrelated). The issue is that I'm setting the background image based on an `activeCategory` and `categories[activeCategory].image` data and if you hover quickly the `activeCategory` on the linkLeave will be set to null while also hovering over another item and it becomes broken. Can anyone think of a decent way to implement this without the bugs using GSAP. Is there a way to prevent the animation if the user hasn't hovered for long enough etc? Hopefully you understand my issue. linkEnter($event, index) { let allLinks = this.$refs.menu.querySelectorAll('a') let allLinksExceptThis = Array.from(allLinks).filter(item => item.innerText != $event.currentTarget.innerText); gsap.to(allLinksExceptThis, { opacity: 0.5, duration: 0.5 }) this.activeCategory = index gsap.to(this.$refs.bg, { opacity: 1, duration: 0.5 }) }, linkLeave(index) { let allLinks = this.$refs.menu.querySelectorAll('a') gsap.to(allLinks, { opacity: 1, duration: 0.5 }) gsap.to(this.$refs.bg, { opacity: 0, duration: 0.5, onComplete: () => { if (index === this.activeCategory) this.activeCategory = null } }) }
  2. Yes, perfect. Makes sense Thanks!
  3. I have an animation (timeline) that, when the page loads, is played after a delay of 3 seconds. What I'd like to do is, if the user clicks, to ignores the delay and plays. homeLoader: function() { let homeLoaderTimeline = gsap.timeline().delay(3), $homeLoaderOverlay = document.querySelector('div.home__loader'); homeLoaderTimeline.to($homeLoaderOverlay, { y: '-100%', duration: 0.6 }); $homeLoaderOverlay.addEventListener('click', () => { homeLoaderTimeline.play(); }); } I've tried changing this to using pause and play, and even on click setting the progress to 1 (but obviously this skips the animation). Any pointers on where I'm going wrong?
  4. I always tend to have a problem when I fire a gsap stagger/animation from a toggle (run when toggle on and kill/stop when toggle off) as if the user toggles super quickly (exhaustive testing) it won't kill/clear in time etc and I'm left with some items staggered in and others not. My thinking would be to create some sort of timeout to prevent this but I'm not sure. This is what I have for my stagger. staggerMenuItems: function(open, $elem) { let $elems = $elem.querySelectorAll('li'); if (open) { gsap.to($elems, { visibility: 'visible', stagger: -0.5, delay: 0.5 }); } else { gsap.set($elems, { clearProps: 'all' }); } } Any thoughts on how to improve this?
  5. Thanks for the reply! I did try this but it seems to go diagonal on scroll rather than left/right or up/down (which I think has to do with the `normalized` var as it's controlling both). As this doesn't necessary use gsap; do you know if there's a demo/example of using mousewheel to translate and zoom?
  6. Sorry to bring up an old thread but I'm wondering if this is also possible when mousewheeling both X and Y (so it would move you left/right accordingly) for example on a MagicMouse or similar?
  7. I also have a question relating to this. I'll post it here BUT do let me know if I should move this to a new thread @ZachSaucier @GreenSock I am also using barba.js with scrollTrigger and when transitioning to pages it's getting a bit mixed up and now working like it does on page load. I have a function for this that I am refiring when the new page comes in. navReveal: function() { let $elems = document.querySelectorAll('nav.main, a.logo__main'), $trigger; console.log('test 1'); if (ScrollTrigger.getById('nav')) ScrollTrigger.getById('nav').kill(); if (dev.ui.body.classList.contains('home')) { $trigger = document.querySelector('div.home__content'); } else { $trigger = dev.ui.body; } gsap.fromTo($elems, { opacity: 0 }, { opacity: 1, ease: 'none', scrollTrigger: { id: 'nav', trigger: $trigger, start: '0 center', end: '+=100px', scrub: true, markers: true, onUpdate: self => console.log('progress: ', self.progress) } }); } The issue seems to be that when I transition from page to page the trigger position is lost (as is moving about per page). The markers remain in tact but that's okay as they don't remove when you kill the scrollTrigger instance. SO. I'm wondering if from looking at the code if everything looks ok and I'm not doing anything stupid? The idea is that if the instance has already been created, then kill it, and then when it gets to the gsap.fromTo part it should be creating it (again).
  8. aok

    Rotate element on scroll

    Turns out I hadn't added `gsap.registerPlugin(ScrollTrigger);` Your example didn't BUT I guess that's because it wasn't an import? import { gsap, Power2, Bounce } from 'gsap'; import { ScrollTrigger } from "gsap/ScrollTrigger"; gsap.registerPlugin(ScrollTrigger);
  9. aok

    Rotate element on scroll

    In my CodePen tests it works fine. I just can't understand why it would run automatically.
  10. aok

    Rotate element on scroll

    Thanks so much, @mikel I added my code to pen and it works great (https://codepen.io/richardcool/pen/ZEQGmge) but on the site I'm building it runs the rotation on load (goes from 0 to 1800deg in one go). Do you know why this would happen?
  11. Hi folks, Is it possible, using scrollTrigger, to rotate an element on scroll (positive or negative whether scrolling up or down) something similar to this: https://codepen.io/dudleystorey/pen/pgzeor but for only one element? Thanks!
  12. As usual Thanks so much, Zach. This makes more sense!
  13. I'm attempting to allow that if the user hovers on one element, it then transitions the other elements (siblings). I'm doing this with mouseenter/mouseleave. const dev = {}; dev.interactions = { init: function() { this.bindEvents(); }, bindEvents: function() { let $filters = document.querySelectorAll("[data-filters] a"); $filters.forEach(function($filter) { let $filters = [ ...$filter.closest("[data-filters]").querySelectorAll("[data-filter]") ], $filterSiblings = $filters.filter(function(filter) { return filter !== $filter; }), filtering = gsap .to($filterSiblings, 0.4, { css: { color: "#ece9e2" } }) .pause(); $filter.addEventListener("mouseenter", function(e) { dev.interactions.filtersOnEnter(filtering); }); $filter.addEventListener("mouseleave", function(e) { dev.interactions.filtersOnLeave(filtering); }); }); }, filtersOnEnter: function(filtering) { filtering.play(); }, filtersOnLeave: function(filtering) { filtering.reverse(); } }; dev.interactions.init(); The issue is I think the timing out or start/stop of the animation? I've tried a variation of approaches but with each I can't seem to work out what's going wrong? Any pointers?
  14. This is amazing, by the way. Thank you! @Jack Yep, that's exactly what I meant. So the repeatRefresh trick would work in the latest beta but I think this keyframe approach is much better. Appreciate all your help.