Jump to content
Search Community

rohitsinghshan

Members

  • Posts

    11

  • Joined

  • Last visited

 Content Type 

Posts posted by rohitsinghshan

    why toggle class is not adding the class when triggered

    in GSAP

    Posted

    15 hours ago, Carl said:

    if you want a ScrollTrigger to end when another trigger reaches a certain point you can specify another element as the endTrigger

     

     

    https://greensock.com/docs/v3/Plugins/ScrollTrigger

    I'm using endtrigger sir
     

        let fixed = gsap.timeline({
      scrollTrigger: {
        trigger: "#scene-brush-alt",
        endTrigger:"#scene-7-alt",
        start: "top top",
        end: "bottom+=10",
        toggleClass: "fixed"
      },
    });

    why toggle class is not adding the class when triggered

    in GSAP

    Posted

    21 minutes ago, Carl said:

     

    I saw 2 potential problems.

    Your section in question appears to be  the last on the page. This means there is a good chance the top will never reach the top of the window. You have trigger set to "top top".

    You also seem to want to change the trigger element to position fixed. that seems like a logic problem as a fixed element will never leave the viewport.

     

    in the modified demo below you can scroll to the bottom and you will see the background color turn red which verifies that the stick class is being applied. I set the start to "top bottom" so that we could be somewhat sure that section reached the trigger point.

     

     

     

     

    in the future please take the time to minimize your demo and remove extra js, css and html. it was difficult to hunt down where everything was.

     

    Sorry for lengthy code and Yeah sir, Sticky class is applying at the bottom where I have to remove it, I want to apply it when we scroll to  <div class="scene-brush-alt" id="scene-brush-alt"> and end at 

    <div class=" scene-alt scene-details-alt  scene-7-alt" id="scene-7-alt">

    after updating iOS15 animation break on iphone

    in GSAP

    Posted

    8 hours ago, Cassie said:

    Your first question stated it was breaking on iOS15.

    I'm afraid we can't help unless you can explain clearly what it is you need help with. Sorry.

    Yeah, the main website is breaking on iOS15 so I'm trying to make a replica of that website and I'm new to gsap. So I was thinking if there will be a solution to manage the main website then I will do that but as you said that can't be helped so I'm creating the same with HTML CSS and js in local. So I need help that how I can animate that brush cap. You can see the demo  on https://www.dr-best.de/interdental/ and I have coded that in codepen 

    See the Pen dyJVaBV by shaan-singh (@shaan-singh) on CodePen

    after updating iOS15 animation break on iphone

    in GSAP

    Posted

    27 minutes ago, Cassie said:

    I'm afraid it's incredibly difficult to bug hunt on a live site Rohit. We really want to help make sure this isn't a GSAP bug though.

    Could you possibly narrow down the specific piece that isn't working and make a minimal demo for us?

    See the Pen dyJVaBV by shaan-singh (@shaan-singh) on CodePen



    here is codepen. I try to replicate it but end up where the brush cap didn't show as on the main website. I'm trying to replace their code with mine. 

    after updating iOS15 animation break on iphone

    in GSAP

    Posted

    15 minutes ago, Cassie said:

    I'm afraid it's incredibly difficult to bug hunt on a live site Rohit. We really want to help make sure this isn't a GSAP bug though.

    Could you possibly narrow down the specific piece that isn't working and make a minimal demo for us?

    Sir project is too complex, and it's on AEM so I only got that top part where brushes are animated and I am unable to understand what's going on as they have created their custom script for scrolltriger and gsap. If you want to see the script then click on this link to see it https://a-cf65.ch-static.com/etc/designs/zg/drbest/desktop/js/libs/dr-best-scroll-anim.min.js

    rotate image out of viewport into the viewport as scrolling

    in GSAP

    Posted

    1 hour ago, mvaneijgen said:

    I've got something. Your brush was on the wrong side and was in the wrong orientation, so I've mirrored it, but that makes the text flipped. 

     

    The rotation is no 180 degree, way less then that and it also moves from the right in the original example.

     

     

     

    Thanks sir, this only I have to achieve but this text are also overlapping and I don't know why. can you solve this also?

    Capture.JPG

    rotate image out of viewport into the viewport as scrolling

    in GSAP

    Posted

    1 hour ago, mvaneijgen said:

    Could you share a demo of your code, this way you get better support on this forum.

     

    If I take a wild guess of what I think you're having trouble with is `transformOrigin:"75% 100%"` this property allows you to specify a point of and element (for you an image) on which it rotates 

     

    Thankyou for your reference sir, I have made codepen 

    See the Pen dyJVaBV by shaan-singh (@shaan-singh) on CodePen

     

    I want big light-blue toothbrush to work like a reference website. And if my script can be written in betterway then please tell me as I'm new to this

×
×
  • Create New...