Dmoco

Hi All, I am having some slight issues with adding a matchmedia to my .tl animation. I have included a pen however I have only including the code to my animation and not the HTML or CSS because i'm using webflow and theres a lot of going on there and also because my animation was working perfectly fine until I added the matchmedia. Can someone let me know why it may not be working? I am trying to change the the width of the .logo-container class depending if on mobile or desktop. (80vw for mobile, 20vw for desktop). Also just for easy viewing when looking at the Pen, the snippets bellow are exactly what I added to the gsap when trying to include match media, and without these parts the animation was working fine. let mm = gsap.matchMedia (); mm.add({ isDesktop: "(min-width: 800px)", isMobile: "(max-width: 799px)" }, (context) => { let {isMobile, isDesktop} = context.conditions; width: isMobile? "80vw" : "20vw", I feel that I have wrote everything correctly after watching Cassies youtube tutorial, but maybe I have wrote something incorrect or missing something, I would be incredibly grateful if someone could let me know where I might be going wrong.

Hi Peoples! I was wondering if this is possible, to connect two splides for a eccom product page. For example a vertical splide showing all product photos & a horizontal splide showing just one product photo, but when a product picture is clicked on the vertical splide the vertical splide will scroll or show the corresponding product picture. Probably going around the houses a bit, but is this possible? or what would be the best solution for this? P.s Im using webflow for this. Thanks! Dmoco

Hi guys, no worries I manage to fix it, was quite easy but I forgot to add "path" after the target element name! Here's the updated code for anyone else in the future... $(".footer-spacer").each(function (index) { let triggerElement = $(this); let targetElement = $(".footer-logo path"); let tl = gsap.timeline({ scrollTrigger: { trigger: triggerElement, // trigger element - viewport start: "top 20%bottom", end: "bottom bottom", scrub: 1 } }); tl.from(targetElement, { opacity: 100, y: "150", stagger: .5, ease: "expo.out", }); });

Hi guys, I am currently trying to stagger a svg using scroll trigger. For some reason it docent seem to work with the code im using, which is strange because I used the same code for a logo load animation and seems to work perfect. I don't use codepen unfortunately as im new to code. Any ideas what might be the problem? Ive also attached the share link to my site as im using Webflow and you can see the first animation is what im looking for but in the footer section. Ive got my footer position fixed, and using a spacer to reveal the footer when scrolled to the bottom. https://preview.webflow.com/preview/stellar-bikes?utm_medium=preview_link&utm_source=designer&utm_content=stellar-bikes&preview=8fd574af2c15ba7d2d05f9b7702446c0&workflow=preview https://stellar-bikes.webflow.io $(".footer-spacer").each(function (index) { let triggerElement = $(this); let targetElement = $(".footer-logo"); let tl = gsap.timeline({ scrollTrigger: { trigger: triggerElement, // trigger element - viewport start: "top 20%bottom", end: "bottom bottom", scrub: 1 } }); tl.from(targetElement, { opacity: 100, y: "150", stagger: .5, ease: "expo.out", }); });