Jump to content


  • Posts

  • Joined

  • Last visited

About D.Cus

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

D.Cus's Achievements

  1. @Jloafs I stumbled across this thread as I was having a similar issue. So what solved the issue for me was having an init() function run on both page load and the after hook. In this init function give each scrollTrigger an id relative to the section or functionality store those ids in an array then using the before hook loop through each id using `ScrollTrigger.getById(id)` and then run the kill() function Not tested the below code but should help understand what fixed my issue gsap.registerPlugin(ScrollTrigger); const prefix = 'className'; let triggerIDs; init(); function init() { const sections = document.querySelectorAll('sections'); triggerIDs = []; sections.forEach(function(element, index) { const ID = prefix + '__' + index; const tl = gsap.timeline({ scrollTrigger: { id: ID, markers: true, trigger: element, }, }) triggerIDs.push(ID) }); } barba.hooks.beforeLeave((data) => { triggerIDs.forEach(function(id) { ScrollTrigger.getById(id).kill(); }); }); barba.hooks.after((data) => { init(); });
  2. @GreenSock thanks for the head ups on the static.convertCoordinates() function I will defiantly try and use this to match each of the markers for each section. @Cassie With regards to the resize issue turns out it was my fault and a quick fix for my pen was to zero the svg overlay before resetting the `startEndArr` variable, I think me using .getBoundingClientRect() does not take into account the transform applied at that time. I think maybe using the motionPathPlugin functions may make things more streamline. Anyway here is my updated code with the quick fix on resize: `window.addEventListener("resize", function () { gsap.set(svg, {x: 0, y:0}) startEndArr = getStartEnd(); ScrollTrigger.refresh(); });` https://codepen.io/darren-ignition/pen/VwMdmPJ
  3. I can see the values are updating just not passing through or updating the timeline on resize. The logic behind this pen was to match the position each marker (one from within the svg container and the other within each of the sections) as you scroll down the page. Aesthetically it does what it is desired until the user resizes the browser. I am sure it is something relatively simple but just can't wrap my head around what it is
  4. @Cassie Thanks for the minimised demo, seems applying backgroundColour change to the tween does work when a resize event is applied however just doesn't seem to make changes to my x and y values in the tween in the fromTo here: `.fromTo(svg, { x: () => Math.round(startEndArr[index].startX), y: () => Math.round(startEndArr[index].startY), }, { x: () => Math.round(startEndArr[index].endX), y: () => Math.round(startEndArr[index].endY) }, 0 )` https://codepen.io/darren-ignition/pen/MWEGZOb
  5. apologises for the lack of clarity the only values I need to refresh in the pen are in `startEndArr' variable and at the bottom on the js I do reset them within a resize event listener.
  6. Thanks for the info using a different approach I have done it like this but the values still don't seem to refresh on resize: https://codepen.io/darren-ignition/pen/vYejzzP
  7. Here is my pen I am having trouble updating the transform values on resize, I have used `invalidateOnRefresh` which I thought would work however it seems to do nothing to my pen what am I doing wrong Thanks in advance
  8. How do I update the end value in this scrollTrigger when the browser does a resize. I have tried doing a resize event to fire ScrollTrigger.refresh(); but this seems to do nothing and running the scrollTrigger within a resize just creates multiple scrollTrigger instances Thanks in advance
  9. Sort this one myself, changing the start point sorted my issues out
  10. I want to add some multiple nested animations into one scroll trigger however I feel I am doing some wrong. I can see that the nested animations work when I comment out the scroll-trigger code however as soon as I add the scroll-trigger into the master_tl it does not fire the master_tl. Thanks in advance
  11. @PointC thanks for the information and approach, really helpful for what I am trying achieve
  12. Created a load of hover points in this section that I want to switch out the text on hover with an animation, this works however when you hover between them quickly it seems to break how do stop the overlapping of signpost text and hover text? Thanks in advance
  13. I did think it may have been me just trying to get a better understanding, thanks for the explanation
  14. In this pen I have 3 sections and want the first section to load the animation by using "top top" is the scrollTrigger start but it seems to not load in the first section animation unless I add start: "-1 top" what I am doing wrong this can't be normal behaviour for the plugin. I feel like it must be me doing something wrong here
  15. I have made some amends to a demo I found of a sticky header. I was trying to add a class when the user is at the top of the browser in order to blend the header into a hero or something. Is what I have done the most efficient way to do this? Also is there some way of delaying the show and hide classes to avoid the flash of red on scroll down?