Jump to content

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


  • Posts

  • Joined

  • Last visited

SWALKER's Achievements

  1. Hi there, thanks for that. Unfortunately that first piece of code did not work. I will go through and see if i can narrow it down. How would I add will-change or force3D onto this for example? gsap.to(".letter", { scrollTrigger: { trigger: ".letter", start: "top 93%", }, x: 0, duration: 1, opacity: "94%", ease: "ease-in-out", delay: 1.2 });
  2. I have finished my website but there is one issue I just cannot seem to fix. On ipad, the 3 basic animations which animate three titles from left to right using x values, stick, flicker and then jump. I have tested in many other browsers and desktop and it's perfect but not ipad - it's also slower on ipad? It is the same issue using either chrome or safari on ipad (and probably others). I can't understand it as I have used the exact same type on multiple objects and they all work perfectly. I can't see any syntax errors in my code The link URL is https://tinyurl.com/b3frsvyh and it's the 3 links that say Facebook, Instagram and Newsletter I have tried to make a codepen to replicate the environment as much as I can but the issue doesn't seem to happen on ipad and I can't work out what the difference is between this and my site I included all my tweens because I thought maybe it was an issue in a previous tween that was causing it? The tweens in question are near the bottom, just above the match media ones It's driving me mad so any help would be greatly appreciated

    Responsive Tween

    Hi there - gosh that was a fast response! Thanks so much for that - I will read through it I have pasted all my JS here if this helps https://codepen.io/shereewalker/pen/ZEJbXvG

    Responsive Tween

    I am very new to gSAP but I'm loving it BUT I can't manage to change the tween parameters responsively. All I am trying to do it change a Y value at certain breakpoints I tried this but it doesn't seem to work and actually when I insert it at the start of my JS file, nothing after works as if there is a syntax error but I can't see one and a validator came back clean? $(window).on('resize',function(){ if($('#content').width() >= 768){ // tweens or code can go here gsap.to(".about-right-lower", { scrollTrigger: { trigger: ".upper-image", start: "top 100%", end:'+=20000', scrub: 1, }, y: "-60%", ease: "ease-in-out" }); } else if($('#content').width() <= 767){ gsap.to(".about-right-lower", { scrollTrigger: { trigger: ".upper-image", start: "top 100%", end:'+=20000', scrub: 1, }, y: "-10%", ease: "ease-in-out" }); } }); I have complete layout shifts so I can't think of any adequate solution other than changing the parameters (for example using viewport based widths and heights). Any help would be amazing!