Jump to content
Search Community

Pradeep PI

Members

  • Posts

    13

  • Joined

  • Last visited

 Content Type 

Posts posted by Pradeep PI

    ScrollToPlugin with link at the top

    in GSAP

    Posted

    59 minutes ago, akapowl said:

     

    Yes, as I mentioned, GSAP's ScrollTo-Plugin simply does not work with locomotive-scroll, so you can not use it when you use locomotive-scroll. Also you are trying to make use of jQuery syntax but are not loading jQuery in the first place.

     

    Here is a solution without jQuery using locomotive-scroll's own scrollTo method

     

     

     

    hi @akapowl bro

    thank you so much.. It works well

    ScrollToPlugin with link at the top

    in GSAP

    Posted

    1 hour ago, akapowl said:

    Hey there, @Pradeep PI

     

    Locomotive scroll does not make use of native scroll behaviour and changes things fundamentaly when it comes to that.

    Thus it won't work with GSAP's ScrollTo-Plugin but instead has scrollTo-method of its own, which you can find more info on in their docs.

     

    https://github.com/locomotivemtl/locomotive-scroll

     

    As it is not a GSAP product, support for locomotive-scroll is not actually offered in these forums.

     

    There is a GSAPy ScrollTrigger smoothScroll() function too, though, if that's something you might want to consider instead.

    You can find an example of that in the .scrollerProxy() documentation.

     

    Happy scrolling :) 

     

     

    ScrollTrigger - Horizontal Scrolling

    in GSAP

    Posted

    On 6/3/2020 at 11:29 AM, GreenSock said:

    The problem is that your #container element is NOT the full width of all its contents. It is only as wide as the screen. So everything is working the way it's supposed to from GSAP's perspective, but you've got it only moving xPercent: -100 which means it moves to the left by the width of the screen (not nearly enough). 

     

    So all you'd need to do is correct the distance you want it to travel so that it's the entire width of all your elements MINUS the width of the screen (otherwise it'll go all the way off the screen). So your tween could be: 

      

    




gsap.to(container, {
  x: () => -(container.scrollWidth - document.documentElement.clientWidth) + "px",
  ease: "none",
  scrollTrigger: {
    trigger: container,
    invalidateOnRefresh: true,
    pin: true,
    scrub: 1,
    end: () => "+=" + container.offsetWidth
  }
})

    Here's a fork:

     

    hi ,

    I tried to add animations for inside panel elements using scrolltrigger.. but it doesnt work.. pls help me

    See the Pen BaRPGqZ?editors=1100 by pradeepppi (@pradeepppi) on CodePen

    On 6/3/2020 at 11:29 AM, GreenSock said:

     

     

    ScrollTrigger - Horizontal Scrolling

    in GSAP

    Posted

    On 6/3/2020 at 11:29 AM, GreenSock said:

    The problem is that your #container element is NOT the full width of all its contents. It is only as wide as the screen. So everything is working the way it's supposed to from GSAP's perspective, but you've got it only moving xPercent: -100 which means it moves to the left by the width of the screen (not nearly enough). 

     

    So all you'd need to do is correct the distance you want it to travel so that it's the entire width of all your elements MINUS the width of the screen (otherwise it'll go all the way off the screen). So your tween could be: 

      

    
gsap.to(container, {
  x: () => -(container.scrollWidth - document.documentElement.clientWidth) + "px",
  ease: "none",
  scrollTrigger: {
    trigger: container,
    invalidateOnRefresh: true,
    pin: true,
    scrub: 1,
    end: () => "+=" + container.offsetWidth
  }
})

    Here's a fork:

     

    hi ,

    I tried to add animations for inside panel elements using scrolltrigger.. but it doesnt work.. pls help me

     

     

    GSAP Slider, carousel with text animation

    in GSAP

    Posted

    On 6/23/2018 at 6:26 AM, Carl said:

    It would really help if you could simplify the demo.

    After reading your description I don't know how this code relates to what you describe in the 4 steps.

      

    
TweenMax.set("#foreground", {alpha:1}, 0);
TweenMax.from(".path", 1, {x:50,scale:1.2}, 0);
TweenMax.from(".small-path", 1, {scale:2.4,x:150}, 0);
// Staggered menu items 
TweenMax.set(('.icon-line'), {autoAlpha:0,width: "0%", ease: Sine.easeInOut},'.1');
TweenMax.to('.icon-line', 2, {autoAlpha:1,width: "35%", ease: Sine.easeInOut },'.2') ;

TweenMax.staggerFrom(".fadeText",1,{delay:2,opacity:0, x:-50},'.3');
TweenMax.to("#foreground", 1, {delay:4,y:'-150%',
                                                             
//initiate Bootstrap
onComplete: function() {
    $('#carousellABM').carousel('cycle');
        TweenMax.to(".fadeText", .15, {
                scale: 1,
                ease: Cubic.easeOut
        })
    $('#carousellABM').on('slide.bs.carousel', function () {
        $(this).carousel('cycle');
        tl.play(); 
    })
    
       
}                                           
},'.4')

     

    What are .path .small-path,  .icon-line?

     

    Your description of the problem asks how to animate text, an image, and a blue background, but I'm just seeing a lot that has nothing to do with those things.

     

    What does this code do?

      

    
$('#carousellABM').carousel('cycle')

     

    Please understand that it is very difficult AND time consuming to look at 70 lines of JS that we have never seen before, with few meaningful comments, and understand how it relates to 60 lines of HTML code that we have never seen before.

     

    From the description you provided I would expect a demo with 4 images, 4 text elements, and a single "blue background" div, and perhaps 20 lines of JS at most.

     

    If there is anyway you can simplify this so that we can focus on a singular issue (related to GSAP) in a simplified demo that doesn't include bootstrap, that would go along way towards us being able to provide effective support.

     

    Unfortunately, we really have to focus on the GSAP API and not so much untangling large chunks of custom code in a project that isn't working.

    How can I create this slider in gsap 3 ? could you please show me sample?

     

    Thank You

    Horizontal slide scroll jumping into above div section issue while scrolling

    in GSAP

    Posted

    Hi dears,

     

    I developed a website with gsap3 . But there is a big issue.

     

    I created a panel horizontal scrolling effects with gsap and scrolltrigger.

    But while scroll down, the panel scrolling jump into the above div and merged to it.

    I tried my best, but i could'nt get perfect solution for this.

    pls check the attached sample screenshots

    Please help me guys.

    Thanks in advance

    html-file.zip

    design-issue.jpg

    original-design.jpg

×
×
  • Create New...