Jump to content


  • Posts

  • Joined

  • Last visited

Recent Profile Visitors

1,861 profile views

nicmare's Achievements

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

Recent Badges



  1. nice one! never seen that "async" / "await" stuff so far. but it works! cool stuff. thank you OSUblake!
  2. yea i know my approach made no sense but i had no clue how to access the timelines. But thankfully your code does the job. Thank you very much! I then tried to use the await code from the other post but it seems not to work. reverse animation is not firing: let targets = gsap.utils.toArray(".menu-item-has-children"); targets.forEach(subitem => { const nav_tl = gsap.to(subitem, { height:"auto", duration:0.2 }).pause(); const submenu_tl = gsap.from(subitem.querySelector(".sub-menu"), { paused: true, autoAlpha: 0, x: "-=30", ease:"back", duration: 0.3, }); // add animations to element subitem.nav_tl = nav_tl; subitem.submenu_tl = submenu_tl; $(subitem).on("click touchstart", (e) => { e.preventDefault(); targets.forEach(target => { async function animate1() { await Promise.all([ target.nav_tl.reverse(), target.submenu_tl.reverse() ]); }; nav_tl.play(); submenu_tl.play(); }); }); }); do i miss something? i get not js console error
  3. that is my approach: let targets = gsap.utils.toArray(".menu-item-has-children"); targets.forEach(subitem => { const nav_tl = gsap.to(subitem, { height:"auto", duration:0.2 }).pause(); const submenu_tl = gsap.from($(subitem).find(".sub-menu"), { paused: true, autoAlpha: 0, x: "-=30", ease:"back", duration: 0.3, }); $(subitem).on("click touchstart", (e) => { e.preventDefault(); targets.reverse(); targets.reverse(); nav_tl.play(); submenu_tl.play(); }); }); but it does not work. there is no reverse before.
  4. I have this collapsing sub-navigation which works pretty good with mouseover/leave. But now the client wants the toggle effect triggered by click event. Having a click event is easy and opening is also no problem. But how can i call all other gsap timelines to close/reverse before opening the current item?
  5. nice one! that utils wrapper was the missing piece. works like a charm now: https://www.loom.com/share/a2f92a8afedd4bf691787b9c045e5fa5
  6. the timescale example is what i was looking for. in the start there is smooth easing, in the middle(during hover) an infinite loop and at the end it kinds of fades out with easing. thanks @OSUblake – but i like the code more of @cassie 2nd codepen as i need to be sure to trigger animation for the current element if there are multiple with same classes at once. so this is my final code: $(".btn-rotated").mouseover((e) => { gsap.to(e.currentTarget, { duration: 5, ease: "none", rotation: "-=360deg", repeat: -1 }); }).mouseleave((e) => { gsap.to(e.currentTarget, { duration: 2, ease: "power.out", rotation: "-=50deg", overwrite: true }); }); only thing whats missing is the smooth easing start.
  7. Hi Gsaps! i created a nice mouse over / leave effect and i am nearly happy with it. As you can see the transition between infinite loop part and start and end tween has some glitches. any idea how to improve it? cheers nic
  8. thank you very much. that simple breakdown is what i will try now. but from my point of view as a user it still feels complicated because of redundant partial code. just take this as feedback please. not complaining!
  9. i just simplified my codepen. the problem is that i need to insert gsap code to an existing (elementor) wordpress page where device_info is already given. they already use some kind of window resize listeners deep in there frontend js. therefore i wanted to use that changing variable for gsap too to avoid to many running functions at the same time. performance… is there another example without using matchMedia?
  10. sure here is a very simple sample written in codepen. page load desktop: https://codepen.io/nicmare/pen/MWmygKW?device=desktop page load mobile/tablet https://codepen.io/nicmare/pen/ExmKYRm?device=mobile When you resize THIS window, the variable "device_info" changes. But when you hit "Start" in the first codepen it still plays the timeline with the old values. but it should look like in the 2nd codepen. i need an idea how to get gsap using the updated device_info value.
  11. i do not see where this could help. i do not use scrolltrigger component.
  12. I was literally searching for hours in the doc and in the forums. With GSAP3 what is the easiest way to use ONE timeline and change parameter values while resizing the screen? I found an easy way to load different values on page load. But i fail to change them on window resize event: let hns_megamenu1 = $("#hns_megamenu1"); let tl_mm1 = gsap.timeline(); let push_y1 = hns_megamenu1.outerHeight(); let push_y2 = hns_megamenu2.outerHeight(); let push_x = 0; let autoAlpha = 1; if(device_info === "mobile"){ push_y1 = 0; push_y2 = 0; autoAlpha = 0; push_x = 50; } tl_mm1.from(hns_megamenu1, { display:"none", marginTop: "-"+push_y1, duration: .3, x: "+="+push_x, autoAlpha: autoAlpha, ease: "ease", }).pause(); $("[data-toggle-megamenu]").on('click', function(event) { tl_mm1.play(); }); i successfully managed to change values in a swiper instance by using their update event: var resizeTimeout; $(window).on("resize",function(){ if(!!resizeTimeout){ clearTimeout(resizeTimeout); } resizeTimeout = setTimeout(function(){ device_info = window.elementorFrontend.elements.$body[0].dataset.elementorDeviceMode; var mm_swiper = $("#hns_megamenu1 > .elementor-container")[0].swiper; mm_swiper.update(); },100); }); my approach was to do something similar with GSAP but can not find any similar to an "reinitialisize" or "update" event here.
  13. nice one! thats what i am talking about. thank you! and when i have a child element "div.img" i would do the following (which currently works): const products = gsap.utils.toArray('.product'); products.forEach((product, i) => { tl1 .from(product, { duration: 1, opacity: 0, x: "-=30" }) .from(product.getElementsByClassName("img"), { duration: 1, opacity: 0, scale: 0.5 }) .to(product, { duration: 1, opacity: 0, x: "+=30" },"+=1"); });
  14. can i hook into this question please? at the moment my working code is the following. is there potential to optimize it the gsap way? i have no jquery loaded: var $products = document.querySelectorAll('.product'); for (var i = 0; i < $products.length; i++) { tl1.from($products[i], 1, { opacity: 0, x: "-=30" }); tl1.to($products[i], 1, { opacity: 0, x: "+=30" },"+=1"); }
  15. i think its solved! i just replace "width" with "scale". Wow! Sorry for asking…