Hi
Sorry, it's been a while.
I have a new issue.
The timeline takes ages to load and when scrolling, near the end, the browser almost freezes. It's very glitchy. I suspect performance issues.
I can give you code to review, but unfortunately I can't send you a link as the project is still in development and not yet for public eyes.
Also note that I'm using Wordpress. I've built a custom array made up of 2 custom post types that appear on the timeline.
// GSAP
import {gsap} from 'gsap';
import {ScrollTrigger} from 'gsap/ScrollTrigger';
import {ScrollSmoother} from 'gsap/ScrollSmoother';
import {Draggable} from 'gsap/Draggable';
import {ScrollToPlugin} from 'gsap/all';
export function storyTimeline() {
gsap.registerPlugin(
ScrollTrigger,
Draggable,
ScrollSmoother,
ScrollToPlugin
);
const panelsContainer = document.querySelector('.container');
if (panelsContainer) {
const sections = gsap.utils.toArray('.panel');
let maxWidth = 0;
const getMaxWidth = () => {
maxWidth = 0;
sections.forEach((section) => {
maxWidth += section.offsetWidth;
});
};
getMaxWidth();
ScrollTrigger.addEventListener('refreshInit', getMaxWidth);
let scrollTween = gsap.to(sections, {
x: () => `-${maxWidth - window.innerWidth}`,
ease: 'none',
});
let horizontalScroll = ScrollTrigger.create({
animation: scrollTween,
trigger: panelsContainer,
pin: true,
scrub: true,
end: () => `+=${maxWidth}`,
invalidateOnRefresh: true,
});
var dragRatio = maxWidth / (maxWidth - window.innerWidth);
var drag = Draggable.create('.proxy', {
trigger: panelsContainer,
type: 'x',
allowContextMenu: true,
onPress() {
this.startScroll = horizontalScroll.scroll();
},
onDrag() {
horizontalScroll.scroll(
this.startScroll - (this.x - this.startX) * dragRatio
);
},
})[0];
let storyLinks = document.querySelectorAll('.story');
let years = document.querySelectorAll('.year');
years.forEach((year) => {
ScrollTrigger.create({
trigger: year,
containerAnimation: scrollTween,
onEnter: () => year.classList.add('selected'),
start: 'left 90%',
ease: 'none'
});
});
storyLinks.forEach((storyLink) => {
ScrollTrigger.create({
trigger: storyLink,
containerAnimation: scrollTween,
onEnter: () => storyLink.classList.add('selected'),
start: 'left 80%',
ease: 'none'
});
});
gsap.to('.navbar .button', {
opacity: 1,
pointerEvents: 'visible',
duration: 1,
ease: 'none',
scrollTrigger: {
trigger: '.panel.story-board',
containerAnimation: scrollTween,
start: 'left center',
toggleActions: 'play none none reset',
},
});
document.querySelectorAll('.button-round').forEach((anchor) => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
let targetElem = document.querySelector(
e.target.getAttribute('href')
),
y = targetElem;
if (
targetElem &&
panelsContainer.isSameNode(targetElem.parentElement)
) {
let totalScroll =
scrollTween.scrollTrigger.end -
scrollTween.scrollTrigger.start,
totalMovement =
(sections.length - 1) * targetElem.offsetWidth;
y = Math.round(
scrollTween.scrollTrigger.start +
(targetElem.offsetLeft / totalMovement) *
totalScroll
);
}
gsap.to(window, {
scrollTo: {
y: y,
autoKill: false,
},
duration: 1,
});
});
});
}
};
<?php $timeline = get_timeline(); ?>
<section class="panel story-board" id="storyBoard">
<ul class="years">
<?php foreach ($timeline as $item) : ?>
<?php if (!empty($item['lodge_ids']) || !empty($item['story_ids'])) : ?>
<li class="year">
<?= (!empty($item['year'])) ? '<h3>' . $item['year'] . '</h3>' : ''; ?>
<?php $lodgeClass = (!empty($item['lodge_ids'])) ? 'has-lodge' : ''; ?>
<ul class="stories <?= $lodgeClass; ?>">
<?php if (!empty($item['lodge_ids'])) : ?>
<?php foreach ($item['lodge_ids'] as $lodgeId) : ?>
<li class="story lodge">
<div class="inner">
<div class="story-head">
<div class="location">
<h5><?= get_the_title($lodgeId); ?></h5>
<p>
<?php
$terms = get_the_terms($lodgeId, 'location');
if ($terms && !is_wp_error($terms)) {
$single_term = reset($terms);
$term_name = $single_term->name;
echo str_replace(' - ', ', ', $term_name);
}
?>
</p>
</div>
<div class="dated">
<span class="opened">Opened</span>
<span class="date">
<span><?= get_the_date('M', $lodgeId); ?></span>
<span>
<?php
$year = get_the_date('Y', $lodgeId);
echo substr($year, 0, 2) . '<br>' . substr($year, 2);
?>
</span>
</span>
</div>
</div>
<?php if (has_post_thumbnail($lodgeId)) : ?>
<div class="story-img">
<?php $thumb_url = get_the_post_thumbnail_url($lodgeId); ?>
<img src="<?= $thumb_url; ?>" alt="Featured" class="lazyload visi" />
</div>
<?php endif; ?>
<?php
$post_content = get_post($lodgeId);
$content = $post_content->post_content;
if ($content) :
?>
<div class="excerpt">
<?= wpautop($content); ?>
</div>
<?php endif; ?>
</div>
</li>
<?php endforeach; ?>
<?php endif; ?>
<?php
if (!empty($item['story_ids'])) :
foreach ($item['story_ids'] as $storyId) :
$storyDate = get_post_meta($storyId, 'story-date', true);
$storyTitle = get_the_title($storyId);
$storyGuest = get_post_meta($storyId, 'your-name', true);
$storyLodges = get_post_meta($storyId, 'lodge-visited', true);
$storyWords = get_post_meta($storyId, 'story-words', true);
?>
<li class="story">
<a href="#" class="story-link" data-story-id="<?= $storyId; ?>">
<span class="story-date">
<?php
if ($storyDate) {
$date = DateTime::createFromFormat('M Y', $storyDate);
$formatted_date = $date->format('M Y');
echo $formatted_date;
}
?>
</span>
<?php
$attachments = get_attached_media('', $storyId);
if (!empty($attachments)) :
$single_attachment = reset($attachments);
$attachment_url = wp_get_attachment_url($single_attachment->ID);
$file_ext = wp_check_filetype($attachment_url);
?>
<div class="story-img">
<?php
if (($file_ext['ext'] === 'jpg' || $file_ext['ext'] === 'jpeg' || $file_ext['ext'] === 'png')) : ?>
<img src="<?= $attachment_url; ?>" alt="<?= $single_attachment->post_title; ?>" style="display: block; width: 100%;">
<?php endif; ?>
<?php if ($file_ext['ext'] === 'mp4' || $file_ext['ext'] === 'mov') : ?>
<video>
<source src="<?= $attachment_url; ?>" type="video/mp4">
Your browser does not support HTML video.
</video>
<?php endif; ?>
</div>
<?php endif; ?>
<div class="story-auth">
<?php
if ($storyGuest) {
echo '<span>' . $storyGuest . '</span>';
}
if ($storyLodges) {
echo '<span>' . str_replace(',', ', ', $storyLodges) . '</span>';
}
?>
</div>
<div class="story-excerpt">
<?= ($storyWords) ? wp_trim_words($storyWords, 20, '...') : ''; ?>
</div>
</a>
</li>
<?php endforeach; ?>
<?php endif; ?>
</ul>
</li>
<?php endif; ?>
<?php endforeach; ?>
</ul>
<div class="story-tail">
<h2>Pioneering spirit, enduring purpose</h2>
<p>
As we look to the next 30 years of our
conservation journey, Lorem ipsum donor sit
amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore
magna aliqua.
</p>
</div>
</section>
