Hello everyone,
I’m having a problem with GSAP. I added it to my functions.php using the documentation from the GSAP website.
function theme_gsap_script(){
// The core GSAP library
wp_enqueue_script( 'gsap-js', 'https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js', array(), false, true );
// ScrollTrigger - with gsap.js passed as a dependency
wp_enqueue_script( 'gsap-st', 'https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/ScrollTrigger.min.js', array('gsap-js'), false, true );
// Your animation code file - with gsap.js passed as a dependency
wp_enqueue_script( 'gsap-js2', get_stylesheet_directory_uri() . '/assets/js/gsap-init.js', array('gsap-js'), false, true );
}
add_action( 'wp_enqueue_scripts', 'theme_gsap_script' );
I then added an effect to a place to test (still according to the document on the gsap site)
// wait until DOM is ready
document.addEventListener("DOMContentLoaded", function(event){
gsap.registerPlugin(ScrollTrigger);
console.log("DOM loaded");
//wait until images, links, fonts, stylesheets, and js is loaded
window.addEventListener("load", function(e){
//custom GSAP code goes here
gsap.to('#brxe-gyynip', {
x: 400,
ease: 'none',
scrollTrigger: {
trigger: '.gsap-trigger',
start: 'top 50%',
end: 'bottom 50%',
scrub: 2,
markers: true,
invalidateOnRefresh: true,
}
});
//custom GSAP code goes here
console.log("window loaded");
}, false);
});
The problem is that if I resize the navigation window, it moves my markers and therefore breaks the effect.
I searched the internet and found quite a few people who have the same problem as me, but no solution addresses my issue (maybe because Bricks requires a specific solution?).
If you could help me, that would be great.
(I’ve included the code for my section if you want to take a look; it’s a very basic test section.)
Thank you.
I’m putting two images for you, one normal when I don’t resize the window. and one where the bug occurs after resizing the window.
{"content":[{"id":"wzicwq","name":"section","parent":0,"children":["vdvfcm"],"settings":{"_background":{"color":{"raw":"var(--dark-5)","id":"01H7XJZ4GBR5DD6Q0547QE5P4H.5","name":"dark-5"}},"_justifyContent":"center","_cssGlobalClasses":["xoizce","qienjd"],"_border":{"width":{"top":"1","bottom":"1"},"style":"solid","color":{"raw":"var(--border-primary)","id":"01H7XJSG365T8WPY0M8A651XE9","name":"border-primary"}},"_margin":{"top":"800","bottom":"800"},"_overflow":"hidden"},"label":"Test"},{"id":"vdvfcm","name":"container","parent":"wzicwq","children":["kgxoqt","gssjtn"],"settings":{"_display":"grid","_gridGap":"var(--space-m)","_gridTemplateColumns":"repeat(2, minmax(0, 1fr))"}},{"id":"kgxoqt","name":"block","parent":"vdvfcm","children":[],"settings":{}},{"id":"gssjtn","name":"block","parent":"vdvfcm","children":["gyynip"],"settings":{"_position":"relative"}},{"id":"gyynip","name":"div","parent":"gssjtn","children":[],"settings":{"_width":"50","_height":"50","_background":{"color":{"raw":"var(--success-50)","id":"01GXK54XWRD73XSRXMZVMQPZY4.50","name":"success-50"}}}}],"source":"bricksCopiedElements","sourceUrl":"https://www.maquette.nideel.fr/bougiefamily","version":"2.0.2","globalClasses":[{"id":"qienjd","name":"gsap-trigger","settings":{}}],"globalElements":[]}
