kprkr

Yes amazing thank you! The logo does flash fullsize pre-gsap for a moment but then goes down to the correct size depending on the scroll position. Thats good enough for me!! Thanks!

Hey all! So, have been using scrolltrigger in my Webflow project and it is going great. I have a navbar animation that causes it to resize as the user scrolls. However, if the user enters the page and scrolls to quickly, or refreshes the page, the scroll-trigger triggers move to the top of where ever the user is on the page, rather than top of the entire page. Causing the animation to sometimes only happen midway down the page. Here is a page example: - https://weareopal.webflow.io/jobs (Let it load, the scroll, that is the ideal outcome) Now, refresh midway down the page and it will cause the trigger to only happen there, scrolling any higher will keep the navbar huge. Here is the code used: gsap.registerPlugin(ScrollTrigger); ScrollTrigger.defaults({ markers: false, }); ScrollTrigger.matchMedia({ "(min-width: 992px)": function() { // Animate From $(".navbar-section").each(function (index) { let triggerElement = $(this); let targetElement = $(".navbar_logo"); let tl = gsap.timeline({ scrollTrigger: { trigger: triggerElement, // trigger element - viewport start: "0px top", end: "120px top", scrub: 0.75 } }); tl.to(targetElement, { width: "365px", duration: 0.5 }); }); // Animate From $(".navbar-section").each(function (index) { let triggerElement = $(this); let targetElement = $(".navbar"); let tl = gsap.timeline({ scrollTrigger: { trigger: triggerElement, // trigger element - viewport start: "80px top", end: "100px top", scrub: 0.75 } }); tl.to(targetElement, { boxShadow: "0 1px #373737", }); }); //navbar_link-list $(".navbar-section").each(function (index) { let triggerElement = $(this); let targetElement = $(".nav-content-wrapper"); let tl = gsap.timeline({ scrollTrigger: { trigger: triggerElement, // trigger element - viewport start: "20px top", end: "120px top", scrub: 0.75 } }); tl.to(targetElement, { y: "-20px", duration: 0.5 }); }); } })

Thanks for confirming that @Cassie I was afraid that may be the issue. Is there any clever way around this? Seems a shame to have to pick between the transforming ability or the tooltip feature. Though, I can appreciate this is just soemtimes the way it is ?

Ah yes, apologies for not attaching one sooner. Here is the link - https://codepen.io/JAParker443/pen/rNrEeea So, i have 4 boxes. Box 1 and 4 are gsap-positioned (acting as the "end" state). 2 and 3 are static. As you can see, hovering over boxes 2 and 3, the label shows a tooltip. Hovering over box 1 shows the tooltip in an offset (unintentionally) place, And hover box 4 the tooltip is off screen somewhere. Not sure if this is clear enough to the problem so let me know if I need to add more detail.

Hi all, I recently built a static page, and am now going back through and adding GSAP to some elements. However, I have run into a bit of a problem when it comes to GSAP elements moving (Parralaxing) and using my cursor-index, I was hoping someone can point out what I am doing wrong. So, I have a "project card" that contains a span that, when hovered, has a tooltip show up at the cursor. This all works perfectly pre-GSAP movement. const tooltip = document.querySelectorAll('.project-tooltip'); document.addEventListener('mousemove', fn, false); function fn(e) { for (var i=tooltip.length; i--;) { tooltip[i].style.left = e.pageX + 'px'; tooltip[i].style.top = e.pageY + 'px'; } } However, I would like every other card to move/scroll faster, and so I added a ScrollTrigger to a few cards like so: gsap.registerPlugin(ScrollTrigger); let mm = gsap.matchMedia(); mm.add("(min-width: 769px)", () => { //Project Card Paralax (loops over each card with class "paralax_project-small") let projectCard = document.querySelectorAll(".paralax_project-small") projectCard.forEach(element => { let Card = element.querySelectorAll(".paralax_project-card") let tlParalax = gsap.timeline({scrollTrigger: { trigger:element, // markers:true, start:"top 80%", end:"bottom 40%", toggleActions: "restart none none reverse", scrub:0.5 }}); tlParalax.to(Card, {yPercent: -25}, 0) }) }) The faster-scrolling for every other card looks great. But, the problem now is, any card that has this yPercent: -25 ScrollTrigger, causes the tooltip to appear somewhere completely different. (Most of the time off-screen) So, I was wondering if gsap is somehow conflicting with the cursor position, or the overall calculation of the cursor itself. And, is there any way around it or is it an issue of using one or the other? Thanks!

@Cassie I just wanted to follow up on this. When I swap out the code, it now just gives me element.style { visibility: hidden; } Essentially, (even after removing hidden from my css)

Cassie, i'm an idiot. GSAP is enabling the visibility to visible, otherwise it is hidden. Thank you for pointing out my so obvious mistake ?

Hey @Cassie Yeah, it confused me too and is quite a hard one to explain ? Im not sure how I could go about making a minimal demo, as im not exactly sure what is happening, just that without GSAP on the secondary page, it is not rendering, but with it, it does. I can however share the site, maybe there is a clue in there if you think that would help at all? And oh awesome, thanks for that tip, much cleaner!

Hi all, bit of an odd one today. So, I have been playing with GSAP (Mainly ScrollTrigger) on my homepage, and it is working great. I figured it was time to make an "About" page. However, if I am not wanting to use GSAP on that page, I run into an issue. I noticed that my HTML and CSS wasn't rendering, but was showing up in devtools. It would only show up after I visited, and then refreshed the page. I carried on, and later I decided to add GSAP like so: mounted () { this.portfolio() }, methods: { const gsap = this.$gsap const q = this.$gsap.utils.selector(this.$el) const tl = gsap.timeline() gsap.to('body', 0, { css: { visibility: 'visible ' } }) // hero aniamtions tl .from('.portfolio-page .work-intro .work-title', 0.75, { delay: 0.25, opacity: 0, y: 10, ease: 'Power4.ease' }) } and the page now renders everything straight away, without having to refresh (even the stuff not being animated). What am I doing wrong? Is it something to do with having to kill GSAP upon leaving the homepage?

Yes perfect, thanks all! I knew there would be something but I just could not figure out what it would be called/where to look.

Hi all, this is more of a question on how to better manage my code and not repeat myself too often. So, right now I am noticing I have maybe 20 elements being animated like so; tl.from('.example', 1, { opacity:0) .from('.example1', 1, { opacity:0) .from('.example25', 1, { opacity:0) .from('.example992', 1, { opacity:0) .from('.example372', 1, { opacity:0) They are usually more complex (timing, opacity, skew, X, etc) and, as I go through and tweek anything, I am having to go and replace my 20 objects in my timeline. What would be the best case for just create one, and then applying it to each of my ".example" elements? My use case just for context, is to apply a similar/the same animation to multiple Headers, images and paragraphs throughout the site, which can get quite messy and a lot of repeating. However, I cannot just select all/loop through all <p> as I may not want to it apply to all... I guess my question is, is there some sort of way similar to how I may create a @mixin and @include it for css, but GSAP and its timeline logic?

@Cassie thank you so much, works perfectly! And, yeah I agree double H1 is not ideal. Right now I am breaking a single title-line into 2, so I can edit them independently but I should probably do something more along the lines of <h1> <span>Line One</span> <span>Line Two</span> </h1> <p>Body text here</p> Right? Again, thank you Cassie you have saved me much headache!

OSUblake you are a life saver, thank you so much! Cannot believe I spent so long trying to figure it out and the solution was so simple. If I could ask you one more thing, if I were wanting to also add an animation to two H1 tags (an extra H1 under the current H1) as well as add an animation to the P tag, what would be the best way to do that? Would it be a case of using a .timeline at the .group level rather than using; gsap.from(header.querySelector("h1")," I ask this, because I implemented your changes above (which worked, thank you again!) But, feel that maybe this is a lot of code to animate 3 elements in each ".group" and just wondering if there is a better way I should approach this scenario? animateOnScroll () { const q = this.$gsap.utils.selector(this.$el) // const tl = this.$gsap.timeline() const gsap = this.$gsap // eslint-disable-next-line arrow-parens q('.section-header').forEach(header => { gsap.from(header.querySelector('h2:nth-of-type(1)'), 0.8, { y: 40, opacity: 0, skewY: 7, scrollTrigger: { trigger: header, start: 'top 50%', toggleActions: 'restart none none none', markers: true } }) gsap.from(header.querySelector('h2:nth-of-type(2)'), 0.8, { y: 40, opacity: 0, skewY: 7, delay: 0.3, scrollTrigger: { trigger: header, start: 'top 50%', toggleActions: 'restart none none none', markers: true } }) gsap.from(header.querySelector('p'), 0.8, { y: 40, opacity: 0, delay: 0.6, scrollTrigger: { trigger: header, start: 'top 50%', toggleActions: 'restart none none none', markers: true } }) }) }

Sorry, I am new to this site and its formatting and for some reason my first "working" example is displaying at the bottom of the post, followed by the broken, but more along the lines of what I am looking for, example.

Hi all, so I am extremely new to the world of GSAP and have spent a few hours messing around and and browsing the forums, but I have run into a bit of a roadblock that may be an obvious fix, but I cannot seem to figured it out. Figured it was time I asked for some help. So, on my page I have 3 sections. Something similar to this - <div class"section-title"> <h1>Title</h1> <p>Body Information</p> </div> <div class"section-title"> <h1>Title</h1> <p>Body Information</p> </div> <div class"section-title"> <h1>Title</h1> <p>Body Information</p> </div> What I am able to do, is use a forEach loop, and animate each section. Which is great, each .section-title loads its H1 and paragraph in at the same time. However, what I would like to do, is be able to control the speed/delay of the H1 and paragraph within the section title. Here is what I have working - https://codepen.io/_kprkr/pen/qBmVrWg However, I have tried messing with the code to select the H2 whilst still triggering at the .section-title, but when I do something such as - https://codepen.io/_kprkr/pen/poPdewL const headers = gsap.utils.toArray('.group') // eslint-disable-next-line arrow-parens headers.forEach(header => { gsap.from('.section-header h1', { y: 40, opacity: 0, scrollTrigger: { trigger: header, start: 'top 50%', toggleActions: 'restart none none none', markers: true } }) }) To grab and edit the H1, it works for the first one, exactly how I would like it to, but the 2nd and 3rd instances of it are already loaded in. I have tried a variety of From, to, fromTo, etc and figured I am clearly not on the right path and wanted to see what the right way is, rather than bruteforcing it with 20 different triggers. Thanks!