iamrufus

Thanks so much Zach, I shall try setting the images as fixed, what offsets would need changing? Apologies my JavaScript skills are still pretty raw ☺️ your right regarding the flash when switching urls for the images, I’m thinking of changing that so there is an individual image in the image wrapper for each hover item that fades in to get rid of that

Hi Zach thanks so much for your help. The section I was trying to get the same effect from on that site was the second section where it has a list of 9 projects and then on hover it displays an image that then follows the mouse cursor in the center. on my pen my images on hover don’t appear to be centered around the mouse position, they appear to be off to the right and I can’t quite work out where I have gone wrong in my gsap code. I hope that kinda makes sense....I’ve been going round in circles all day with it. thanks again for your kind help

Hi all Im wondering if someone might be able to lend me a hand with a hover affect i am trying to achieve. What i want is when i hover over one of my venue links for the image to appear and move with the mouse cursor. I have a pen below and my current code that shows what i have so far. Its kinda working but not exactly how i would like. I want it to work similar to the below site (the commercial work section) https://www.craig-reynolds.com/ Please excuse my perhaps poor use of gsap as i am still learning my way around it, i'm currently taking some courses to help me. Id be so grateful for any help with this. Thanks everyone

Thanks so much for this Zach much appreciated! I shall check out the position parameter as well, still learning my way round javascript and GSAP. Thanks a ton for your help

Hi GSAP Just looking for some advice on how to increase and decrease my visual slide counter text during my slider transition. Here is a code pen as an example https://codepen.io/iamrufus/pen/gOPEbpL At the moment i have added the text to update after the timeline but as you can see it changes it before is fades the opacity out in the timeline. What i want is the opacity to fade out, the number to change and then fade back in. Hope this kind of makes sense. class Slider { constructor(slider) { this.slider = document.querySelector(slider); this.container = this.slider.querySelector('.slider--container'); this.counter = this.slider.querySelector('.slider--counter--current'); this.slides = this.slider.querySelectorAll('.slider--slide'); this.slideTxt = this.slider.querySelectorAll('.slider--txt'); this.slideWidth = this.slider.querySelector('.slider--slide').clientWidth; this.nextSlide = this.slider.querySelector('.next'); this.prevSlide = this.slider.querySelector('.prev'); this.currentSlide = 0; this.nextSlide.addEventListener('click', () => { this.slideNext(); }); this.prevSlide.addEventListener('click', () => { this.slidePrev(); }); } slidePrev() { if (this.currentSlide === 0) { return; } else { this.currentSlide--; sliderTl .to(this.container, { x: -this.slideWidth * this.currentSlide }) .to(this.slideTxt[this.currentSlide], { xPercent: 0 }, '-=1') .to(this.counter, { opacity: 0, y: 5, duration: .3 }, '-=1') .to(this.counter, { opacity: 1, y: 0, duration: .3 }, '-=.5') this.counter.innerText = `0${this.currentSlide + 1}` } } slideNext() { if (this.currentSlide === this.slides.length - 1) { return; } else { this.currentSlide++; sliderTl .to(this.container, { x: -this.slideWidth * this.currentSlide }) .to(this.slideTxt[this.currentSlide - 1], { xPercent: -65 }, '-=1') .to(this.counter, { opacity: 0, y: 5, duration: .3 }, '-=1') .to(this.counter, { opacity: 1, y: 0, duration: .3 }, '-=.5') this.counter.innerText = `0${this.currentSlide + 1}` } } } let mySlider = new Slider('.slider--1'); const sliderTl = gsap.timeline({ defaults: { duration: 1, ease: 'power2.inOut' } });

Hi Greensock Just looking for some advice regarding setting some styles using gsap.set, I'm slowly getting to grips with gsap so bare with me I have about 4 elements i would like styled on page load, i currently have it like this let serviceName = document.querySelectorAll('.service--name'); let serviceImgMain = document.querySelectorAll('.service--image--main img'); let serviceImgBackLeft = document.querySelectorAll('.service--image--back--left'); let serviceImgBackRight = document.querySelectorAll('.service--image--back--right'); let currentSlide = 0; gsap.set(serviceName[currentSlide], { opacity: 1, duration: 0 }) gsap.set(serviceImgMain[currentSlide], { scale: 1.2, duration: 0 }) gsap.set(serviceImgBackLeft[currentSlide], { xPercent: -25, duration: 0 }) gsap.set(serviceImgBackRight[currentSlide], { xPercent: 25, duration: 0 }) I just wondered if there was a better way to write the above? I know i could quite easilly set the styles in css but because i wanted to keep all the styling for this slider done in gsap Also on a side note i have noticed that my tweens in firefox don't appear to be very smooth compared to safari and chrome. Is there anything i could do to increase performance in firefox? Appreciate any advice Thank you

Hi Zach, Thanks very much for the reply, Yes all im looking to do is just reset the current scale of the images of the active slide back to default on click when moving to the next slide then remove the active class and add it to the next slide to animate the images in for that slide. (hope this kinda makes sense) As for the logical error im aware of it, im just testing the animations but i know as soon as it gets to my 4th slide its going to break

Hi Ive just started using GSAP for the first time and i must say i am really enjoying it! My question is i would like to reset my .to animation on click to the default states the elements were in but i am just a little confused on how to do it. Apologies if this is a basic thing but i am learning my way round this slowly. This is my current code, its just a simple slider that animates a couple of images (function () { let slider = document.querySelector('.service--slider'); let slide = document.querySelectorAll('.service--slide'); let slideNext = document.querySelector('.service--slider--btn--next'); let slidePrev = document.querySelector('.service--slider--btn--prev'); let currentSlide = 0; slideNext.addEventListener('click', function () { slide[currentSlide].classList.remove('active'); currentSlide++; slide[currentSlide].classList.add('active'); gsap.timeline() .to(slider, { xPercent: -100 * currentSlide, duration: .7 }) .to('.service--slide.active .service--image--back--left', { scale: 1, rotate: -3, }) .to('.service--slide.active .service--image--back--right', { scale: 1, rotate: 3 },'-=.5') }); }()); What i would like is on the click event for both of these .to animations that target the current images on the active slide to revert back to their initial state in css which is scale 0 .to('.service--slide.active .service--image--back--left', { scale: 1, rotate: -3, }) .to('.service--slide.active .service--image--back--right', { scale: 1, rotate: 3 },'-=.5') Hope this doesnt sound to confusing, im sure there may even be a better way for me to structure it perhaps but its all a learning curve currently for me. Thanks everyone