grid-template-columns: calc(42%-15px) calc(19%-15px) calc(22%-15px) 17%;
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import { MotionPathPlugin } from "gsap/MotionPathPlugin";
gsap.registerPlugin(ScrollTrigger);
gsap.registerPlugin(MotionPathPlugin);
const myPath = document.querySelector(".flying-obj__path");
const dove = document.querySelector(".flying-obj__dove");
const tl = gsap.timeline({
scrollTrigger: {
trigger: dove,
start: "top 50%",
end: "top",
scrub: 1,
},
});
tl.to(dove, {
duration: 5,
opacity: 0.5,
motionPath: {
path: myPath,
align: myPath,
alignOrigin: [0.5, 0.5],
// autoRotate: true,
},
}).to(dove, {
duration: 3,
opacity: 0,
y: "-100px"
});
let lastScrollTop = 0;
window.addEventListener("scroll", () => {
let st = window.pageYOffset || document.documentElement.scrollTop;
if (st > lastScrollTop){
console.log('downscroll');
dove.style.transform = "scaleX(1)";
} else {
console.log('upscroll');
dove.style.transform = "scaleX(-1)";
}
lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling
}, false);
// HTML output code debugging (crutch) for highlight.js lib
const highlightingBlock = document.querySelector('.someblock pre > code.html');
const highlightingStringsArr = highlightingBlock.innerHTML.split('\n');
let newHighlightingStringsArr = Array();
const regExp = /^\t\t\t/;
highlightingStringsArr.forEach((string) => {
newHighlightingStringsArr.push(string.replace(regExp, ' '));
});
highlightingBlock.textContent = newHighlightingStringsArr.join('\n');
Я не понимаю почему происходит вот это:
Каким образом сделать так, чтобы высоты ячейки равнялась высоту картинки?
Такие свойства для основного контейнера тоже ничего не дают:
Вот это свойство для айтема
align-self: start;
подтягивает ячейки, но в целом картина не меняется.
В чём тут дело?