Jump to content

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

Ihatetomatoes last won the day on August 8 2016

Ihatetomatoes had the most liked content!


  • Content Count

  • Joined

  • Last visited

  • Days Won


Ihatetomatoes last won the day on August 8 2016

Ihatetomatoes had the most liked content!

Community Reputation

212 Specialist


About Ihatetomatoes

  • Rank
    Advanced Member

Profile Information

  • Gender
    Not Telling

Recent Profile Visitors

6,696 profile views
  1. Given that you have your container with a fixed height, you can give your images a fixed width to get around it.
  2. I don't have any resource that I could direct you to. But I am sure there are some npm packages tackling lazy loading or preloading images. From a GSAP perspective your ScrollTrigger demo works as expected.
  3. I think there is an issue on the first load because you are not preloading the images. That means that they have no width when ScrollTrigger is initiated.
  4. Not sure if this is the effect you are trying to create but the horizontal scrolling and triggering is working for me. https://codesandbox.io/s/infallible-black-7prsh By default ScrollTrigger uses the viewport as the scroller (the element that has the scrollbar). In your case I had to add .scroller class to your SliderContainer and add it to the scrollTrigger config. scrollTrigger: { id: `section-${index + 1}`, scroller: ".scroller", trigger: el, start: "left", toggleActions: "play none none none", horizontal: true } Sorry I can't view this on a phone right now. Hope it helps.
  5. Hi, can you create a Codepen demo? It's hard to help if we don't know what error are you getting. Is the issue in React or GSAP? Codepen demo would help us to help you. Cheers
  6. Do you have the latest version of the plugin? ScrollerProxy has been added recently.
  7. Hi, Smooth Scrollbar can work with ScrollTrigger. You need to use the ScrollTrigger.scrollerProxy() to keep ScrollTrigger and Smooth Scrollbar in sync. Here is a simplified code example how it should be done. // init Smooth Scrollbar with options let bodyScrollBar = Scrollbar.init(selector, options); ScrollTrigger.scrollerProxy("body", { scrollTop(value) { if (arguments.length) { bodyScrollBar.scrollTop = value; } return bodyScrollBar.scrollTop; } }); // update ScrollTrigger when scrollbar updates bodyScrollBar.addListener(ScrollTrigger.update); Hope that helps.
  8. Hi @vino3d, welcome to the forum. Of course what you could do with ScrollMagic you can now do with ScrollTrigger and much more. As you mentioned that you are trying to learn I would direct you to the ScrollTrigger starting guide by @Carl. It has few simple demos that would get you started, I think that is the best way to learn. By building few simple demos with ScrollTrigger you will see how animations are triggered and you will be able to build the animation as in your example in no time. I have also GreenSock 101 online course that covers the basics of GSAP3 and ScrollTrigger that might help. Cheers Petr
  9. Works like a charm Jack, thanks for the update. When will the next release be available on CDN?
  10. Make sure that the elements you are trying to animate are on the page. I can't see .ball or h2.title in you screenshot above.
  11. Hi @hugoyong, I am not familiar with Divi, but there is a standard way how to include custom js in your theme. Official WP documentation on including JS https://developer.wordpress.org/themes/basics/including-css-javascript/ To ensure compatibility and prevent conflicts it is recommended to load custom js from your functions.php file. This will make sure that all js files are loaded in the right order. On your screenshot above it should probably be something like this: <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.2/gsap.min.js" /> <script type="text/javascript"> gsap.to(...); </script>
  12. Hi Federica, we went through GSAP only smooth scrolling in another forum thread. Here is the final demo. I have also added a scrolltrigger for each box and all markers are aligned correctly even with the smooth scrolling. https://codepen.io/ihatetomatoes/pen/PoZLpbp Please note that smooth scrolling or scrolljacking is not something ScrollTrigger has been build for, but as you can see from the above it is doable. Scroll responsibly
  13. Hi @FearMe4va, see the below example how to loop over all links and create mousenenter and mouseleave for each of them. https://codepen.io/ihatetomatoes/pen/RwrvdmW The example above works fine and also uses GSAP3 syntax instead of old GSAP2. const buttons = document.querySelectorAll('a'); buttons.forEach(button => { const letters = button.querySelectorAll('a span'); // Timeline const tl = gsap.timeline({paused: true}); tl.to(letters, { duration:1, color: 'black', ease: Expo.easeOut, stagger: 0.02 }); // HOVER button.addEventListener("mouseenter", function(){ tl.play(); }); button.addEventListener("mouseleave", function(){ tl.reverse(); }); }); Hope that helps with your GSAP question. The rest is only your CSS. Happy tweening.
  14. I have a question regarding the styles applied to an element that is pinned with the pinReparent: true. In the codepen demo, the first item in the navigation has a class .is-active and is green. The issues When the navigation is pinned with pinReparent set to true, the active link is white and not green, even through the styles are still applied. Any idea why this is happening? And what are all the styles applied to the pinned element with pinReparent option? Lastest Chrome on Mac. PS: I know this demo would work with simply not including the pinReparent option, but I am just showing a simplified demo of an issue that I am facing on a bigger project.