Here is my site Read-Only: Webflow - MAUREEN SKELLY BONINI
(how to share your site Read-Only link)
Hi,
I’ve integrated the following code into my project.
This part is inside the Header:
<style>
html:not(.w-editor) .loader_component {
display: block;
}
body::-webkit-scrollbar {
display: none;
}
body {
-ms-overflow-style: none;
scrollbar-width: none;
}
.hero_sub-text-wrap .line {
overflow: hidden;
}
</style>
And this part is placed before body:
<script>
var Webflow = Webflow || [];
Webflow.push(function () {
// DOMready has fired
// May now use jQuery and Webflow api
// start everything
var tabTimeout;
clearTimeout(tabTimeout);
tabLoop();
// define loop - cycle through all tabs
function tabLoop() {
tabTimeout = setTimeout(function() {
var $next = $('.tabs-menu').children('.w--current:first').next();
if($next.length) {
$next.click(); // click resets timeout, so no need for interval
} else {
$('.tab-link:first').click();
}
}, 7000); // 7 second tab loop
}
// reset timeout if a tab is clicked
$('.tab-link').click(function() {
clearTimeout(tabTimeout);
tabLoop();
});
});
</script>
<script src="https://unpkg.com/split-type"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
<script>
window.addEventListener("DOMContentLoaded", (event) => {
// text splitting code
let typeSplit;
function runSplitType() {
typeSplit = new SplitType("[split-text]", {
types: "lines, words, chars",
tagName: "span"
});
}
runSplitType();
// run the code when window width changes
let windowWidth = window.innerWidth;
window.addEventListener("resize", function () {
if (windowWidth !== window.innerWidth) {
windowWidth = window.innerWidth;
typeSplit.revert();
runSplitType();
}
});
// page load animation
let homeLoadTl = gsap.timeline();
homeLoadTl
.to(".loader_colums", {
delay: 0.5,
yPercent: -100,
duration: 1.6,
stagger: {
each: 0.1
},
ease: "power4.inOut",
onComplete: () => {
$(".loader_component").css("display", "none");
}
})
.from(
".hero_heading-wrapper .char",
{
yPercent: 100,
duration: 0.8,
stagger: {
amount: 0.5
},
ease: "power3.out"
},
"-=1"
)
.from(
".hero_sub-text-wrap .word",
{
yPercent: 100,
duration: 1,
ease: "power2.out"
},
"<45%"
)
.from(
".hero_background-image-wrap",
{
scale: 1.5,
ease: "power1.inOut",
duration: 2.5
},
0
);
// animations that run on desktop and above
function desktopAnimation() {
// nav menu animation
let navMenuTl = gsap.timeline({
paused: true,
onStart: () => {
$(".nav_menu_component").css("display", "block");
},
onReverseComplete: () => {
$(".nav_menu_component").css("display", "none");
}
});
navMenuTl
.from(".nav_menu_link", {
xPercent: 100,
yPercent: -100,
duration: 1.2,
ease: "power4.inOut",
stagger: {
each: 0.1
}
})
.from(
".nav_menu_other-links .text-link_wrap",
{
opacity: 0,
ease: "power2.out",
yPercent: -40,
duration: 0.3
},
">-=0.5"
)
.from(
".nav_menu_close-trigger",
{
opacity: 0,
ease: "power2.out",
duration: 1.6
},
0
);
// nav menu icon animation
let navMenuIconTl = gsap.timeline({
paused: true,
defaults: {
duration: 0.8,
ease: "power2.inOut"
}
});
navMenuIconTl
.to(".nav_icon-line:nth-of-type(2)", {
yPercent: 100
})
.to(
".nav_icon-line:nth-of-type(1)",
{
rotate: 22.5
},
0
)
.to(
".nav_icon-line:nth-of-type(3)",
{
rotate: -22.5
},
0
);
// navbar first and second click
$(".nav_bar").on("click", function () {
$(this).toggleClass("clicked");
if ($(this).hasClass("clicked")) {
navMenuTl.timeScale(1).restart();
navMenuIconTl.restart();
} else {
navMenuTl.timeScale(1.5).reverse();
navMenuIconTl.reverse();
}
});
// when nav close trigger is clicked
$(".nav_menu_close-trigger").on("click", function () {
navMenuTl.timeScale(1.5).reverse();
navMenuIconTl.reverse();
});
//Set sticky section heights based on inner content width
function setTrackHeights() {
$(".horizontal-scroll_section-height").each(function (index) {
let trackWidth = $(this).find(".horizontal-scroll_track").outerWidth();
$(this).height(trackWidth);
});
}
setTrackHeights();
window.addEventListener("resize", function () {
setTrackHeights();
});
// Add horizontal scroll to the page
let horizontalMainTl = gsap.timeline({
scrollTrigger: {
trigger: ".horizontal-scroll_section-height",
start: "top top",
end: "bottom bottom",
scrub: 1
}
});
horizontalMainTl.to(".horizontal-scroll_track", {
xPercent: -100,
ease: "none",
onUpdate: updateScrollProgress
});
// set progress to 0 on page load
$(".nav_progress-number").text(0);
// set scroll progress text
function updateScrollProgress() {
let progress = Math.round(horizontalMainTl.progress() * 100);
$(".nav_progress-number").text(progress);
}
// add parallax to the hero image on scroll
let heroImageTl = gsap.timeline({
scrollTrigger: {
trigger: ".section_hero",
containerAnimation: horizontalMainTl,
scrub: true,
start: "left left",
end: "right left"
}
});
heroImageTl.to(".hero_background-image", {
x: "30vw",
ease: "none"
});
// change nav state on scroll
let navStatesTl = gsap.timeline({
scrollTrigger: {
trigger: ".section_hero",
toggleActions: "restart none none reverse",
containerAnimation: horizontalMainTl,
start: "0.5rem left",
end: "0.6rem left"
}
});
navStatesTl
.to(".nav_logo-wrap, .nav_logo-text.is-top", {
opacity: 0,
duration: 0.3,
ease: "power3.out"
})
.to(".nav_logo-embed", {
opacity: 1,
duration: 0.3,
ease: "power3.out"
});
// horizontal scroll image scales out
$(".intro_image-wrap, .work_card, .article_card").each(function (index) {
let cardImageTl = gsap.timeline({
scrollTrigger: {
trigger: $(this),
containerAnimation: horizontalMainTl,
start: "left right",
end: "right right"
}
});
cardImageTl.from($(this).find(".image-full-cover"), {
scale: 1.3,
ease: "power2.out",
duration: 1
});
});
// add parallax to the image divider on scroll
let dividerImageTl = gsap.timeline({
scrollTrigger: {
trigger: ".image-divider_wrapper",
containerAnimation: horizontalMainTl,
scrub: true,
start: "left right",
end: "right left"
}
});
dividerImageTl.from(".image-divider_image", {
x: "-50%",
ease: "none"
});
// journal title letter stagger
let journalTl = gsap.timeline({
scrollTrigger: {
trigger: ".jornal_title-wrap",
containerAnimation: horizontalMainTl,
start: "left right",
end: "right right"
}
});
journalTl.from(".jornal_title-wrap .char", {
yPercent: -120,
duration: 0.8,
stagger: {
amount: 0.4
},
ease: "power3.out"
});
}
function mobileAnimation() {
// add parallax to the hero image on scroll mobile
let moileHeroImageTl = gsap.timeline({
scrollTrigger: {
trigger: ".section_hero",
scrub: true,
start: "top top",
end: "bottom top"
}
});
moileHeroImageTl.to(".hero_background-image", {
y: "15vh",
ease: "none"
});
// scroll image scales out
$(".intro_image-wrap, .work_card, .article_card").each(function (index) {
let monileCardImageTl = gsap.timeline({
scrollTrigger: {
trigger: $(this),
start: "top 90%",
end: "bottom top"
}
});
monileCardImageTl.from($(this).find(".image-full-cover"), {
scale: 1.5,
ease: "power2.out",
duration: 2
});
});
// journal title letter stagger
let journalTl = gsap.timeline({
scrollTrigger: {
trigger: ".jornal_title-wrap",
start: "top 80%",
end: "bottom top"
}
});
journalTl.from(".jornal_title-wrap .char", {
yPercent: -120,
duration: 0.8,
stagger: {
amount: 0.25
},
ease: "power3.out"
});
}
// declaring breakpoints for gsap animation
let mm = gsap.matchMedia();
// for animations that should run on tablet and above
mm.add("(min-width: 769px)", () => {
desktopAnimation();
});
// for the animations that should run on mobile
mm.add("(max-width: 768px)", () => {
mobileAnimation();
});
});
</script>
Everything works as expected, but I have one issue:
Before the animation starts, there’s a small flash of the hero image and text — they briefly appear before the loader animation begins.
I’ve tried several fixes , but nothing has solved it yet.
Please can you help me fix this
Thanks a lot for your help!