[After using browser's back button animations won't load]

Here is my website:

https://teriodev.github.io/teriotats/

 

Everything works as intended - animation play on enter and refresh, they also play on a subpage after pressing the book button on the top. The problem is, when you try to go back to the index page, animations won't load. The page is left in it's previous finished state. How can I fixed that and what causes this problem?

[Play animation only if two elements are scrolled to the top]

Yes I was able to fix it! Sorry for not notifying earlier, I was staying up late to sort this out

[Play animation only if two elements are scrolled to the top]

@Cassie

 

This is what I have so far. It's simplified a lot, but I hope it conveys what I'm trying to do. I've been working on it since adding this post and it almost works.

 

To clarify - the grid div zooms in when one of the columns is scrolled, but comes back to its initial state after checking that both columns are scrolled to the top. There shouldn't be a situation where one column is scrolled down and the div shrinks.

 

Right now, the left column expands and shrinks the div, but the right one doesn't seem to have any effect on it

 

The left column can shrink the div even when the right one is scrolled down which shouldn't be the case.

 

See the Pen rNdeOQM by terramsc (@terramsc) on CodePen

[Play animation only if two elements are scrolled to the top]

Hello, I've been learning about gsap for a little and just started with ScrollTrigger plugin. It works great for me, but I stumbled upon something I'm not able to sort out.

 

I have a grid with two columns. When you scroll one of the columns, the whole grid zooms in. That works fine. What I can't do, is to zoom out the grid to its default position only if both of these columns are scrolled to the top.

 

On page load div is zoomed out

Left column - scrolled, right column - initial => zoom in

Left column - initial, right column - scrolled => zoom in

Only zoom out if: left column - initial, right column - initial

 

I'm sorry, but I'm not able to post the code here as it's complicated and it has elements I would have to upload to a hosting server.

 

Here is how the design looks like:

 

Here is my code:

// EXPAND TIMELINE
var expand = gsap.timeline({});

expand.to(".book-window", {border: 0, borderRadius: 0, duration: 0.5, width: "100vw", height: "100vh", margin: 0, padding: 0, bottom: 0}, 0)
expand.to(".info", {borderRadius: 0}, 0)
expand.to(".form", {borderRadius: 0}, 0)

// EXPAND BOOK WINDOW
// media query
const outputElement = document.getElementById("info");

// for less than x px
const smallDevice = window.matchMedia("(min-width: 800px)");

smallDevice.addListener(handleDeviceChange);

// expand functions
function handleDeviceChange(e) {
  if (e.matches) {
    ScrollTrigger.create({
        scroller: '.info',
        animation: expand,
        trigger: ".info-header",
        start: "top top",
        toggleActions: "play none none reverse",
        markers: true
    })

    ScrollTrigger.create({
        scroller: '.form',
        animation: expand,
        trigger: ".form",
        start: "top top",
        toggleActions: "play none none reverse",
        markers: true
    })
  } else {
    ScrollTrigger.create({
        scroller: '.book-window',
        animation: expand,
        trigger: ".info-header",
        start: "top top",
        toggleActions: "play none none reverse",
        markers: true
    })
  }
}

 

[Play on click, when clicked while playing reverse. However, when finished call another function.]

That's it! Thank you so much. I'm annualizing that code and there are some new approaches there I didn't know about before. It's interesting, I will try to work with them in the future.

[Play on click, when clicked while playing reverse. However, when finished call another function.]

Hello. I have started to learn JS few weeks ago and I found this amazing library yesterday. I decided I want to achieve a designed project with it. However, I've been reading resources on this website and reading forum posts, but after hours I still can fix it. Therefore I'm asking here for help.

 

The project is a bit complicated, but I'm hyped about it and that's the way I really want it to work. I think what explains it best is this graph I've prepared for this post:

 

 

I almost achieved this, but I have some problems. After finishing step 4, the animation is broken and reversed in an improper order.

 

Could anyone please try to help me fix my code? Please keep in mind I'm new to this. Thank you all in advance.

See the Pen eYVjwYQ by terramsc (@terramsc) on CodePen