Framer Classic » Hyperlapse » Animating the page indicators

Animating the page indicators

One more thing needs fixing: the page indicators keep insisting that we’re on the first page.

In the same page.on "change:currentPage" we’ll do two more things.

First, we use page_index to set the active dots. The dot representing the current page, and those to its left, should all be solid.

    for i in [0..page_index]
        allSolidDots[i].animate "active"

All the remaining dots should be set to their ‘default’ state (= zero opacity).

We check if page_index is less than 3, because when it’s equal to 3, we’ll be on the fourth page (where they’re all solid).

    if page_index < 3
        for i in [page_index..2]
            allSolidDots[i+1].animate "default"

All together it should look like this:

page.on "change:currentPage", ->
    user_has_swiped = yes
    page_index = page.horizontalPageIndex page.currentPage
    switch page_index
        when 0
            Video_1_Bridge.player.play()
            music_2.mute yes
        when 1
            music_2.mute no
            Video_2_Clouds.player.play()
            music_3.mute yes
        when 2
            music_3.mute no
            Video_3_train.player.play()
            music_4.mute yes
        when 3
            music_4.mute no
            Video_4_people.player.play()
    for i in [0..page_index]
        allSolidDots[i].animate "active"
    if page_index < 3
        for i in [page_index..2]
            allSolidDots[i+1].animate "default"
Open in Framer

Leave a Reply