GSAP Ted

Appreciate your help guys!

@OSUblake Awesome! Pretty regularly I come back to an awesome website with animations and I’ll look into the code and mostly every time it is using GSAP. Then I see some After Effects work that gets me asking how far GSAP could go. @akapowl Amazing! Crazy to think you actually clicked the links on this forum post and had seen exactly what I was asking! Thank you! Every time I come back to this community it’s always proved itself to be very helpful!

I've jumped a bit into some animation with GSAP in the past, but was wondering if these examples below are possible to do in GSAP? Or would this be done in WebGL mostly? Dribbble links below: https://cdn.dribbble.com/users/2215956/screenshots/14459252/media/14e8ef66efe5c33d32224f4c9fd43b7f.mp4 https://cdn.dribbble.com/users/691044/screenshots/14158322/media/6ef27addaa06821f36cdca5c80fcc695.mp4

Thanks for the input @BrianCross even today I was adding in some CSS transitions and keyframes and I had to find a thread on Apple just to implement a particular wording to the code just for it to work on iOS Safari. Safari in general can be a headache.

Thanks @GreenSock I really appreciate your input, i'll continue to further look into it. I look forward to looking more into the forum here, really awesome stuff!

Hey All, new to the GSAP library and loving it! I tried looking into the question but cannot seem to find other reasons except for a possible CPU issue with the browser type? Safari desktop works great, I use a iPhone 12 Mini (see GIF). They are not supposed to be that slow and stuttery for a lack of a better term. Anyone ever come across the issue and could recommend anything from your experience? I'll post the code I have below. const homeController = new ScrollMagic.Controller() const liTL = gsap.timeline(); liTL.fromTo( "nav a", { color: "#fff" }, { color: "rgba(0,0,0,1)", duration: 1, }, ); let liScene= new ScrollMagic.Scene({ triggerElement: "header", triggerHook: 1, reverse: true, offset: (document.querySelector("nav").offsetHeight) + 500, duration: 0, }) .setTween(liTL) // .addIndicators() .addTo(homeController); const navTL = gsap.timeline(); navTL.fromTo( "nav", { backgroundColor: "rgba(0,0,0,0)" }, { backgroundColor: "#fff", duration: 1, } ); let navScene= new ScrollMagic.Scene({ triggerElement: "header", triggerHook: 1, reverse: true, offset: (document.querySelector("nav").offsetHeight) + 510, duration: 0, }) .setTween(navTL) // .addIndicators() .addTo(homeController); let headertl = gsap.timeline() headertl.fromTo('nav', { y: -200, autoAlpha: 0, }, { y: 0, autoAlpha: 1, duration: 2, delay: .1 } ) headertl.fromTo('header', { // y: -200, autoAlpha: 0, }, { // y: 0, autoAlpha: 1, duration: 2, delay: .4 }, );