Jump to content
GreenSock

PixelBorder

Members
  • Posts

    5
  • Joined

  • Last visited

PixelBorder's Achievements

  1. Legend. Thank you Steve - that fixed it.
  2. I'm trying to achieve this same thing but controlled by scrollTrigger instead. I can't seem to get it to work, any idea where I'm going wrong please? $(document).ready(function(){ //GSAP ANIMATION gsap.registerPlugin(ScrollTrigger); //typewriter gsap.to(".intro", { scrollTrigger: { trigger: ".intro", toggleActions: "play none none reverse", start: "top 0" }, text: { value: "Let's get to work" }, duration: 5, delay: 1, ease: "none" }) });
  3. Whoops, sorry about that and thank you for the super quick response! This worked perfectly, thank you. I've not got much of a head for Javascript. I tend to think in terms of CSS when it comes to solutions so it's going to take a bit of a shift in the way I think to get the best out of this. But I'm really impressed with it so far. Thanks again
  4. Actually might have just made a workaround to this. I've added rule of top: 100px to nth-child(even) and it has the desired effect. Would be good to know if there's a better way of doing this with gsap though?
  5. Hi guys, If this was to be applied to a 2 column grid, as opposed to a 1 column grid like in the above example, how would you place a delay between the section on the left animating in and the section on the right animating in? I've basically got the same thing and I need the right column to animate 0.25s after the left column. I tried using stagger but this doesn't seem to be doing anything... Here's the code I'm using: var sections = gsap.utils.toArray('.gsap-block'); sections.forEach((section) => { gsap.from(section, { scrollTrigger: { trigger: section }, duration: 1, opacity: 0.5, y: 150, stagger: 0.25 }); }) and here's how the grid looks: (the blocks in each row animate in at the same time)
×