Как сделать движение блоков при скролле?

Question

[makssshow]

<div class=" portfol">
            <a href="##">
                <img src="img/progects/photo-01.png" alt="pr1">
            </a>
            <div>website</div>
        </div>

.portfol {
    margin: 0 80px 0 0;
    width: 400px;
    font-family: $Mor;
    font-size: 10px;
    text-align: left;

    img {
        width: 400px;
        height: 700px;
        margin-bottom: 31px;
        transform: translateY(-150px);
    }

    div {
        text-align: right;
        padding-bottom: 31px;
        border-bottom: 1px solid $dark;
    }
}

Нужно, чтобы при скролле (Это уже середина страницы) картинка постепенно, ИМЕННО ПОСТЕПЕННО, изменяла transform до 0. Начинала это делать, когда появиться на экране и закончит, когда полностью появится на экране. С возвратом, то есть, при скролле наверх все было в обратную сторону.

Comments

[Danny Arty]

Немного непонятно. Transform у вас стоит trasnslateY - значит при скролле вниз картинка должна постепенно менять значение до 0, а при скролле вверх опять постепенно до -150?
И вот это как понять?

Начинала это делать, когда появиться на экране и закончит, когда полностью появится на экране.

По хорошему код бы в песочницу

Answer 1

[Vyach Gor]

как вариант для этой задачи scrollmagic + gsap - будет что то по типу - link