Jump to content


  • Posts

  • Joined

  • Last visited

Posts posted by JoeH

  1. The codepen I have shared is the "Locomotive Scroll with ScrollTrigger scrubbing and pinning" demo from the ScrollTrigger.scrollerProxy() page, but it is the same as my setup essentially.


    My question is how can I achieve something like this - 

    See the Pen 7c9f1aaa4340ace9c4a05102ba89a962 by akapowl (@akapowl) on CodePen

    Notice how when the item pins it moves through each of the titles one by one.


    I have tried this with the Locomotive Scroll setup but it doesn't work, it waits until the pin is ended before triggering. For example:


        scrollTrigger: {
          trigger: ".pinned",
          start: "top -=10%",
          end: "+=100%",
          scrub: true,
          scroller: '.smooth-scroll'
        .to('.sectors-desktop_text_1', {opacity: 1})

    This is my attempt to get this to trigger when the pin has been scrolled through by 10%.


    The pin looks like this:


        scrollTrigger: {
          trigger: ".pinned",
          start: "top top",
          end: "bottom top",
          pin: true,
          scroller: '.smooth-scroll'

    As I said, this doesn't trigger until the pin is broken. I've tried to remove the scroller value but this doesn't work, nothing is triggered at all. Do I need to set the scroller as something else in order to get it to trigger 10% (or any %) through the pin?


    See the Pen 1dc38ca14811bc76e25c4b8c686b653d by GreenSock (@GreenSock) on CodePen

  2. Hi all,


    Just trying to figure out how to best achieve something. In my screenshot you can see a section on the page I am animating.


    As you can see there is an image on the left and a list of titles on the right.


    Once the user gets to this section I want the mouse scrolling to basically starting from the first element in the list highlight each word one by one and also the image on the left needs to change when each word becomes highlighted.


    But I feel like this whole section needs to be pinned for this, and I am wondering if this is possible, because I don't think I can pin this section because everything below it will still be scrolling upwards, so do I need to pin the entire body?


    Thanks for any suggestions and help.

    Screenshot 2021-04-27 at 13.42.55.png

  3. Hi all,


    I'm trying to figure out how an the effect from this site is being done: https://dreamstormstudios.com/projects/ar-hunters/


    This might be beyond the scope of this plugin so excuse me if this is the case.


    I'm pretty confident I can change the fill colour of an SVG using ScrollTrigger, however if you scroll to the bottom of the page which I have linked and pay attention to the social icons on the bottom left, you will notice that they seem to change colour exactly inline with the boundary of the background, which makes me think this isn't the fill colour but something else which is being manipulated?



    Screenshot 2021-03-22 at 12.39.37.png

  4. I'm trying to figure out how the relativity works when using the following for example.

    .to(stageRef.current, {x: '+=' + itemWidthRef.current, duration: 1, ease: "expo.inOut"})

    As you can see I am animating x relative to the current position using '+='.


    My problem is that after a window resize along the x axis it causes this animation to jump before it starts moving, could it be the case that when I resize the window that GSAP still thinks my element is in the same position?


    This may sound unusual but the reason why I think this is happening is that I have a window resize function which recenters and resizes things, this is a carousel basically and I want it to not be out of proportion on window resize so I am recalculating all the slide dimensions and the full width of the carousel.


    I'm working in React so was hoping I could try this initial question first in the hope it may be something obvious, and then if more info is needed I will try recreate in codesandbox or something.






  5. I have a list item which looks like this


    <li className="menu-list-item" onMouseEnter={menuItemHomeMouseEnter} onMouseLeave={menuItemHomeMouseLeave}>
      <div className="line" ref={menuItemHomeLineRef}/>
      <NavLink to="/" exact>
        <span className="mask" ref={menuItemHomeMask1Ref}><span>Home</span></span>
        <span className="mask" ref={menuItemHomeMask2Ref}><span>Home</span></span>

    And then I have created my TimelineMax as follows


    let menuItemHomeAnim = new TimelineMax({paused:true});
      menuItemHomeAnim.to(menuItemHomeMask1Ref.current, .6, {skewX: '12deg', translateX: '3px'});
      menuItemHomeAnim.to(menuItemHomeMask2Ref.current, .6, {skewX: '12deg', translateX: '-3px'}, '-=0.6');
      menuItemHomeAnim.to(menuItemHomeLineRef.current,  .6, {scale:1, ease:"elastic.out(0.5, 0.3)"},'-=0.4');

    And then my mouseEnter and mouseLeave functions


    function menuItemHomeMouseEnter() {
    function menuItemHomeMouseLeave() {

    As far as I can tell from documentation and looking at other examples this should work.


    However what happens is that the animation plays and then doesn't reverse when the mouse is moved away from the list item. I have checked to see is the menuItemHomeMouseLeave function is triggering and it is.

  6. Sorry yes, it was a flipant remark in my frustration. I managed to figure it out, I didn't need to put it inside the useEffect function because I was already using a Hook to detect mouse movement.

    • Like 1
  7. I haven't had this problem with other plugins apart from Draw SVG, I'm not sure what I am doing wrong, the import directory is correct and the code I am using has worked on other projects.


    It seems to be out of scope because the line - import drawSVG from "gsap/dist/DrawSVGPlugin"; is not highlighting, it remains greyed out.


    And of course the animation is not working. I have taken a screenshot



    Screenshot 2020-10-12 at 18.00.01.png

  8. Hi all,


    I'm not able to provide a CodePen for this I don't think (because I'm using React).


    I'm using Routes and CSSTransition, the problem arises when going between 2 pages which transition, these pages use the same components.


    On the page is a component which is a gallery and uses scrollTrigger to animate in each image in the gallery, my code for this is below.


    What happens is that when the transition is over and the second page has loaded, the scrollTrigger is not triggered (even if I scroll).


    The unusual part is that if I resize the browser width it triggers.


    I understand I'm not exactly giving much to go by here so let me know how I can demonstrate the problem better, I can set this up somewhere it this helps.



    const GalleryType1 = ({assets}) => {
      const GalleryRef = useRef(null);
      useEffect(() => {
        gsap.utils.toArray(GalleryRef.current.children).forEach(section => {
            scrollTrigger: {
              start: "center bottom",
              end: "center top",
          .to(section.children[0].children[0].children[0], 1, {transform: "scaleX(0)", transformOrigin: "right", ease: "power2.inOut"})
          .fromTo(section.children[0].children[0].children[1], {scale: 1.4}, {scale:1, ease: "power2.inOut", duration: 0.9}, '-=0.8')
          .add(function() {
      }, []);
      return (
          <div id="gallery-type-1">
            <div className="container-fluid">
              <div ref={GalleryRef} className="row">
                  {assets.map(({ title, subtitle, image }) => (
                    <div className="col-6 col">
                      <div className="gallery-item">
                        <div className="gallery-image-item-wrapper">
                          <div className="gallery-item-cover"/>
                          <div className="gallery-item-image" style={{ backgroundImage:"url("+image+")" }}>
                        <div className="text">
                          <div className="heading">{title}</div>
                          <div className="sub-heading">{subtitle}</div>
    export default GalleryType1;


  9. Hi,


    I'm a bit stuck on this animation I'm creating, one side of a path is not overflowing when the shape distorts, it's just on the 'R'.


    I have included a crude screenshot to show which section I mean.


    Hoping someone can help me figure this out.




    Edit: I've just noticed it happens on the M amd the F also, on the same side.


    Screenshot 2020-09-17 at 23.08.05.png

    See the Pen YzqORwv by orionJoe (@orionJoe) on CodePen

  10. Hi all,


    Just wondering if anyone could tell me how this effect is done on this website -https://shapestudio.co.uk/


    It occurs as the page loads after the black section swipes upwards, as you can see the central section which is revealed has wavey edges but then animates and goes straight as it expands to fill the window.


    I'm guessing this is an SVG effect, but was hoping it could be done with a regular old div.


    I would be greatful if anyone knows which plugin can achieve this.


    Thanks in advance.

  11. Got this working as such


    $(function () {
      const master = gsap.timeline();
      const logoA = timelines.logo();
      const introA = timelines.intro();
        .add(function () {
        	// play animation initially.
          	// Add hover event listener.
            $('#logo-wrapping').hover(function() {
            }, function () {


    • Like 1
  12. Ok so I think the problem is that the timeline being played through the master timeline is separate from the one I try to play through my hover function. I'm not skilled enough yet to understand why.


    If I remove the .add(logoA.play()); from the master timeline it then works apart from I need to trigger the animation by creating a mouseOut event.



  13. Hi,


    I have 2 timelines which play after one another, but then at the end of the 2nd timeline I want to enable a hover effect so that the 2nd timeline reverses and plays based on a mouse hover event.


    I have the hover effect working on it's own but it just jumps from the start of the timeline to the end when I chain everything together.


    Here are my 2 timelines

    const introAnimation = element => {
      return gsap.timeline({paused: true})
        .to("#logo #part-1", 4, {opacity: 0.2, delay: 2})
        .to("#logo #part-7", 4, {opacity: 0.2}, '-=4')
        .to("#logo #part-3", 4, {opacity: 0.2}, '-=4')
        .to("#logo #part-4", 4, {opacity: 0.2}, '-=4')
        .to("#logo #part-5", 4, {opacity: 0.2}, '-=4')
        .to("#logo #part-6", 4, {opacity: 0.2}, '-=4')
        .to("#logo #part-2", 4, {opacity: 0.2}, '-=4')
        .to("#logo #part-2", 4, {opacity: 0.4})
        .to("#logo #part-2", 8, {rotation: 2000, transformOrigin: "50% 50%", ease: "none"}, '-=8')
        .to("#logo #part-1", 4, {x: 0, y: 0, rotation: 0, opacity: 1})
        .to("#logo #part-7", 4, {x: 0, y: 0, rotation: 0, opacity: 1}, '-=4')
        .to("#logo #part-3", 4, {x: 0, y: 0, rotation: 0, opacity: 1}, '-=4')
        .to("#logo #part-4", 4, {x: 0, y: 0, rotation: 0, opacity: 1}, '-=4')
        .to("#logo #part-5", 4, {x: 0, y: 0, rotation: 0, opacity: 1}, '-=4')
        .to("#logo #part-6", 4, {x: 0, y: 0, rotation: 0, opacity: 1}, '-=4')
        .to("#logo #part-2", 4, {x: 0, y: 0, rotation: 0, opacity: 0.2}, '-=4')
        .to("#logo #part-2", 3, {opacity: 1}, '-=2')
        .to("#tv li", 0.95, {transform: "scaleY(1)", transformOrigin: "bottom right", ease: "expo.inOut"})
        .set("#logo-wrapping", {width: '40%'}, '-=0.2')
        .set("#page", {backgroundColor: 'rgb(15, 59, 65)', delay: 1}, '-=0.2')
        .to("#tv li", 0.95, {transform: "scaleY(0)", transformOrigin: "bottom right", ease: "expo.inOut"}, '-=0.20')
    const logoAnimation = element => {
      return gsap.timeline({paused: true})
        .to("#logo #part-4", {x: -5, y: 0, rotation: -6, duration: 2})
        .to("#logo #part-3", {x: 8, y: -8, rotation: 8, duration: 2}, '-=2')
        .to("#logo #part-2", {x: -2, y: 8, duration: 2}, '-=2')
        .to("#logo #part-1", {x: 2, y: -8, rotation: -10, duration: 2}, '-=2')
        .to("#logo #part-5", {x: 3, y: 4, rotation: -14, duration: 2}, '-=2')
        .to("#logo #part-7", {x: 10, y: -1, rotation: 4, duration: 2}, '-=2')
        .to("#logo #part-6", {x: 13, y: 3, rotation: -5, duration: 2}, '-=2')
        .set('#logo-wrapping', {css: {pointerEvents:"all"}});


    And then below these is my master timeline, as well as my hover event.


    $(function () {
      const master = gsap.timeline();
      var logoA = logoAnimation();
      var introA = introAnimation();
      $('#logo-wrapping').hover(function() {
      }, function () {

    I'm probably doing something fundamentally wrong, but I couldn't find much information online about linking up timelines together, or maybe my javascript skills are not that great yet!

  14. Hi all,


    I had this working previous but for some reason it won't anymore, I'm completely stuck on what is wrong with it. I am basically just starting a reversing a timeline on mouse in and mouse out.


    The error is "TypeError: logoBreak.start is not a function"


    Here is my code, thanks for any help.


    $(function () {  
        broken_1 = { x: 2 , y: -8, rotation: -10 },
        broken_2 = { x: -2 , y: 8 },
        broken_3 = { x: 8 , y: -8, rotation: 8 },
        broken_4 = { x: -5 , y: 0, rotation: -6 },
        broken_5 = { x: 3 , y: 4, rotation: -14 },
        broken_6 = { x: 13 , y: 3, rotation: -5 },
        broken_7 = { x: 10 , y: -1, rotation: 4 };
    	var logoBreak = gsap.timeline({ paused: true })
        .to("#logo #part-4", 2, broken_4)
        .to("#logo #part-3", 2, broken_3, '-=2')
        .to("#logo #part-2", 2, broken_2, '-=2')
        .to("#logo #part-1", 2, broken_1, '-=2')
        .to("#logo #part-5", 2, broken_5, '-=2')
        .to("#logo #part-7", 2, broken_7, '-=2')
        .to("#logo #part-6", 2, broken_6, '-=2');
        $('#logo-wrapper').hover(function() {
        function() {