Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


  • Content Count

  • Joined

  • Last visited

Community Reputation

12 Newbie

About romain.gr

  • Rank
    Advanced Member
  1. Hi, I'm currently working on a website using SrollTrigger and I'm having a couple of issues. Here is the website https://www.16saintgeorges.ch/demo/ Problem 1 : At some point I'd like to scroll horizontally some kind of slider using scrub, what I'm trying to do is to calculate the hidden part of the slider and on scroll change the x value, here is the code : $('.slider').each(function(){ var $thisSlider = $(this); var $thisSliderTrigger = $thisSlider.parents('.section--slider'); gsap.to($thisSlider, { scrollTrigger : { trigger: $thisSlid
  2. Hi, I've been trying to use ScrollToPlugin but I'm unable to install it via npm. I was on the page https://greensock.com/docs/v2/NPMUsage, but it's confusing, is the ScrollToPlugin installed when you do npm install gsap? That's how looks my import but it seems that the ScrollToPlugin is missing, and I can't figure out how to install it : import { gsap, Expo } from 'gsap/all'; import ScrollToPlugin from 'gsap/all'; gsap.registerPlugin(ScrollToPlugin); When I do gsap.to(window, { duration: 2, scrollTo: centerVidPos });
  3. Hi Zach, yep it makes sense, I understand a bit better the different steps, but not your new codepen, first I need to digest the first option, I think I will avoid the second version as it does the exact same thing than the first, it's adding confusion more than help . For the first option it still works only once. I'm still unable to play more than once the timeline. Thank you
  4. Hi Zach, Thank you, to be honest I find your code less readable or clear, I really don't understand how the closing nav part works. What does addPause() do if you already paused the animation when you set it (paused: true), then why repeat: -1? I don't find that very explicit, how do you make the animation closed? Here : gsap.utils.toArray('.trig-nav, .close-nav').forEach(function(btn) { btn.addEventListener("click", function(e) { e.preventDefault; if(!navTL.isActive()) { navTL.play(); } }); }); Where
  5. I don't think it's related to clip-path as the whole nav block is set to display none after the close nav animation is finished, so even if it has clip-path on it, it's display none, clip-path shouldn't interfer with it as it's in display none, but maybe I'm doing a mistake thinking that. The problem is that 'opacity: 1', 'visibility: visible' and 'display: flex', are re-setted to the nav when the close nav animation is finished, I think the problem is in the onComplete callback. Anyway when clip-path is unselected in the dev console, the nav is still showing. I had a closer look
  6. Hi, I'm trying to do a simple navigation using gsap and it works greats, but on some browser I have a little issue, let me explain, I have 2 different animations, One to open the navigation : - Animating the clip-path value - then a fade-in stagger on the navigation items and one to close the navigation : - The whole navigation block fade-out then display not. Here is the code but you can obviously have a look at the codepen : // Nav function restartOpenNav(){ openNav.restart().pause(); } function resta
  7. Hi Craig, Thanks for that
  8. Hi Zack, sounds logic Got the point for the duration, thank you again.
  9. Hi Zach, Thank you for your answer, I'm just wondering if it wouldn't be more simple to use .set() if you want to set the transform-origin (like on the first tween) and use .to() if you want to animate it? I know the answer is no, but it looks like you are adding an extra step to achieve that, if .set() is made to set and .to(), fromTo(), from() is made to animate. Cool little extra advices, about the duration, what if the whole animation is longer than 2 sec, in this case it works but in case of longer animation what's going to happen? or the duration (2) is set for ea
  10. Hi, Not sure what I'm missing here but the transformOrigin is not animating, it just goes from '100% 0' to '0 100%' without transition : var showVideo = gsap.timeline(); var $video = $('.rectangle'); showVideo .set($video, {transformOrigin: '100% 0', scale: .8}) .fromTo($video, 2, {rotationX: 0, rotationY: 0}, {rotationX: '5deg', rotationY: '5deg'}) .to($video, 2, {transformOrigin: '0 100%'}) //.fromTo($video, 2, {transformOrigin: '100% 0'}, {transformOrigin: '0 100%'}) //NOT WORKING either //.fromTo($video, 2, {t
  11. I actually removed few times not important things and reduced stuff to the minimum and the issue was still happening, but yes good advice indeed
  12. Ok so it looks like it was the gsap version the problem, I was using the 3.0.5 and in the pen it's the 3.2.5, but why? is there something in my code that might work with the newer version of gsap and not with the 3.0.5? I'm really confused now, but still thank for helping me, I've been re-reading my code and actually my logic was good. Thanks a lot, but if you could (if possbile obviously) explain me what could be the problem (from my code point of view) with gsap 3.0.5 and working with the 3.2.5, I would be gratefull.
  13. Here is the Codepen, it works perfectly, it's the exact same code, I have just copy/past everything. I don't undertsand https://codepen.io/romaingranai/pen/wvaxRQr?editors=0010
  14. That's actually the part of the code used for the animation : I just want to know why the function setScrollTrue() is fired at the beginning of the homeToAbout timeline, even thought it's set to fire onComplete, can you see any writing mistake? somewhere? I'm going to create a Codepen but from a first view, do you have any idea? var homeAnimIsFinished = false; /// $('#fullpage').fullpage({ scrollingSpeed: 1000, touchSensitivity: 2000, easingcss3: 'cubic-bezier(0.58, 0.56, 0.39, 0.97)' }); fullpage_api.setAllowScrolling(false); fullpage_api.set