Jump to content

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


  • Posts

  • Joined

  • Last visited

dancingrobots's Achievements

  1. Thank you! Greensock is a lot to handle for a newbie like me but your courses are a great help. Thanks again!
  2. I'm working my way through @Carl's creative coding club and have started combining code from the lessons as part of a larger project. I'm able to animate split text via scrolltrigger but I am unable to do so without including GSDevTools which generates a playhead at the bottom of the page. I've tried removing "GSDevTools.create({animation:tl})" and calling the animation strictly through ScrollTrigger but this breaks. Any help would be greatly appreciated. Thank you. function init() { gsap.set("#block-load", { autoAlpha: 1 }); split.lines.forEach((line, index) => { let chars = new SplitText(line, { type: "chars" }); tl.from( chars.chars, { duration: 0.3, yPercent: 100, stagger: 0.04 }, ">-50%" ); }); ScrollTrigger.create({ start: "center 85%", end: "top top", markers: true, animation: tl, trigger: "#block-load" }); GSDevTools.create({animation:tl}) } window.addEventListener("load", init)
  3. Thanks for the feedback. I'll check the slider API.
  4. Hello, I am putting together a slider that uses GSAP to fade in each slide's corresponding banner text. On slide change, the active slide gets a new class addition which is what I'm targeting with GSAP. I've set this div's initial visibility to hidden and use autoAlpha to fade in the content. But I get a flash of unstyled content when a new slide comes into the viewport. Am I misusing fromTo? I would appreciate it if you could point me in the right direction. Please see my timeline code below and the linked codepen demo. const tl = gsap.timeline({ defaults: { duration: 0.75 } }); tl.fromTo( ".is-active .fade-in", { opacity: 0, y: 20, autoAlpha: 0}, { opacity: 1, y: 0, autoAlpha: 1} ); Thanks.