Jump to content
Search Community

meindert

Members

  • Posts

    7

  • Joined

  • Last visited

Profile Information

  • Location
    Belgium

Recent Profile Visitors

825 profile views

meindert's Achievements

8

Reputation

  1. meindert
    I have never seen 'uses decimals for screen width' in the specs when buying a new device ? Anyways, adding overflow-x to the <body> solved the problem, thanks!
  2. meindert
    Hello, I noticed a small bug in ScrollTrigger, specifically about this: (quoted from https://greensock.com/docs/v3/Plugins/ScrollTrigger) The pinned elements gets a fixed width, which is usually correct. BUT I noticed that on my 4K TV, when extending my screen (laptop -> hdmi -> tv), the page gets a horizontal scrollbar. The reason why I am getting the horizontal scrollbar is because the browser width on my TV is 2324,57px (Google Chrome). ScrollTrigger uses '.offsetWidth' (?). OffsetWidth returns an integer, so instead of 2324,57px it returns 2325px, causing the horizontal overflow. (I pinned a fullscreen element) This is probably the case for everyone that would display their website on his/her television? I am no expert in these things. I found two ways to solve this problem: 1. Add an extra element around the pinned element with overflow: hidden; ,hiding the .43px overflow (should this be build in ScrollTrigger when pinning?) 2. Instead of '.clientWidth' use 'getBoundingClientRect().width'. This property returns a float, which will return 2324,57px. (but I once read that this is not good for performance?) Has anyone else noticed this problem? How did you solve this? What would be the best solution? Thank you for your time!
  3. meindert
    I think you mean 'invalidateOnRefresh' ?
  4. meindert
    Hey Jack, Glad I could help to make this plugin even better It works like a charm now, thanks! Meindert
  5. meindert
    Hey, Thank you for your reply. It took much less effort and time than I thought to reproduce it in a Codepen! https://codepen.io/heymeindert/pen/bGwEOaV The bug happens here too. When you resize your window (when the 2nd ScrollTrigger is activated), the pin jump down. Edit: doesn't seem to work in the iframe but works if you click on edit on codepen
  6. meindert
    I have tried an animation like this before and I never had a smooth result (didn't use ScrollTrigger yet back then) but I believe that an image-sequence will be much smoother than manipulating the video timeline, and the browser support will probably be much better Apple does it with an image sequence as well. I found two demos on the forum: https://codepen.io/osublake/pen/2152a28cffe2c2c0cca8a3e47f7b21c6 https://codepen.io/GreenSock/pen/mdVEpKK
  7. meindert
    Hey hey, I have discovered ScrollTrigger a few months ago. I just wanted to add that this plugin is amazing and almost works out of the box for a simple animation. I have tried to do animations in the past without ScrollTrigger (with deboucing, throttling and animationFrames) but I couldn't get it as smooth as ScrollTrigger. Thank you for this wonderful work! I have been searching this forum for a while but I can't find anything that helps. So after a few days, and many hours of struggling, I finally got the courage to make my first post. The situation: I have an element that is pinned in the middle of my screen (height 100%). As soon as it reaches a certain point in my website, a second ScrollTrigger takes over, that also pins the element in the middle of the screen (element is now height 50%). This second ScrollTrigger adds another animation to translate 'image2' upwards to cover up 'image1'. The reason that you see translateX's in the animation is because 'image1' needs to be on the same position at all times (also has a vw-size instead of %, ignoring the parent's width animation). I used two ScrollTriggers because it is very important to be able to control where the first ScrollTrigger ends (ends exactly on a new section). I have searched for a solution for many many hours and I am sincerely hoping that I'm doing something absolutely forbidden or that I have encountered a bug in ScrollTrigger. The problem: Every time I resize my window (or refresh my page) AND the second ScrollTrigger is activated, the pinned element jumps down, getting a wrong translateY that keeps growing every resize tick. For example: my 'pin' is now at transform: translate(0%, -50%) translate3d(0px, 461.001px, 0px); The transform: translate(0%, -50%) is a value from my CSS to center the element in my window. When I resize my screen 1px, the 'pin' moves instantly to transform: translate(0%, -50%) translate3d(0px, 922.002px, 0px); When I resize my screen another px, the 'pin' moves instantly to transform: translate(0%, -50%) translate3d(0px, 1383px, 0px); Meaning that it will get the wrong position very quickly. This only happens when I resize below the first ScrollTrigger (so as soon as the second ScrollTrigger took over). Am I doing something absolutely wrong here? I am working for a client so I can't really share the project just yet. Can you guys help me out? Many thanks in advance. (Quickly deleted my items and replaced my images with some unsplash images. Yes this entire forum will be hungry now!) PS. I would love to use scale instead of animating the width and height, but I can't seem to make it work. My image that isn't allowed to scale (but nested in the element that needs the scale) shrinks too. So I would animate it to scale(2) but it doesn't seem to go linear, making the animation incorrect (also very hard with the translateX at the same time). But thats for a whole different topic. If you have any other feedback on how I coded the timelines, please shoot! I can only learn // register scrolltrigger gsap.registerPlugin(ScrollTrigger) // animate the hero image heroImage() function heroImage() { // get elements to animate const trigger = document.querySelector('#dtx-hero') const pin = document.querySelector('#dtx-hero--image--pin') const imageContainer = pin.querySelector('#dtx-hero--image') const image1Container = pin.querySelector('#dtx-hero--image-1--container') const image1 = pin.querySelector('#dtx-hero--image-1') const image2 = pin.querySelector('#dtx-hero--image-2') // create scrolltrigger const GSAP_timeline = gsap.timeline({ defaults: { ease: 'linear' }, scrollTrigger: { trigger: trigger, pin: pin, start: 'top top', end: 'bottom center', scrub: true, pinSpacing: false } }) GSAP_timeline .fromTo(imageContainer, { height: '100%' }, { height: '50%' } , '<') .fromTo(imageContainer, { width: '100%' }, { width: '50%' } , '<') .fromTo(imageContainer, { x: 0 }, { x: '-11.25vw' } , '<') .fromTo(image1Container, { x: 0 }, { x: '11.25vw' } , '<') .fromTo(image1, { xPercent: 0, y: 0 }, { xPercent: -50, y: 0 } , '<') .fromTo(image2, { yPercent: 100, y: 0 }, { yPercent: 50, y: 0, ease: 'sine.in' } , '<') // create scrolltrigger 2 const GSAP_timeline2 = gsap.timeline({ defaults: { ease: 'linear' }, scrollTrigger: { trigger: '#dtx-intro', pin: pin, start: 'top center', endTrigger: '#dtx-intro .dtx-content', end: 'center center', scrub: true, pinSpacing: false } }) GSAP_timeline2 .fromTo(image2, { yPercent: 50, y: 0 }, { yPercent: 0, y: 0, ease: 'sine.out' } ) }
×
×
  • Create New...