[scrollTrigger scrollTo active class on nav]

I'm quite stuck here, as I need a class active on the navigation Menu. 
- the current section should have the relative menu active. 
is it possible to achieve this?  I used to use className - and + but I know is not longer supported. 

I'm also terrible confused with how the toggleClass/toggleAction works.

 
Please come to the rescue . . . 

See the Pen vYxZMxB by davide77 (@davide77) on CodePen

[How to create menu with pin?]

On 10/19/2020 at 8:43 AM, mikel said:

Hi @mikel

I have a quick question for you. I have the functionality that woks exactly like your demo below.

I need to add a class Active to each button instead of the background color. 
Whats the best approach? I know className: '-=' className: '+=' are not longer supported? 

 

 

 

Happy tweening ...

Mikel

 

[gsap Modal missing a click on the outside box]

Thanks for your lecture:-) I removed the getBoundingClientRect and now works.... I hope is now logical what I've done..

 

[gsap Modal missing a click on the outside box]

Thank you Mikel, as usual you turned a some code into a piss of cake...
On my demo, I have multiple buttons, where I can open the modal. Then once opened a simple closing button, with a click outside the modal that could close it too.
On your demo I think you misinterpreted my initial question. 

[gsap Modal missing a click on the outside box]

I managed to solve an issue and create another one.
Now the position on the button is more than one. hellllllllllpppp 

See the Pen poNEGEL?editors=1112 by davide77 (@davide77) on CodePen

[gsap Modal missing a click on the outside box]

Thanks, for your idication, the way I'm thinking is this below... you lost me..

See the Pen ExNPpXQ?editors=1010 by davide77 (@davide77) on CodePen

[gsap Modal missing a click on the outside box]

Hello, 
I'm struggling to make the modal to close onlclick. 

If I click outside of the modal anywhere, the modal should close.

Any help much apreciated. 

See the Pen ExNPpXQ by davide77 (@davide77) on CodePen

[Fixed header on scroll with GSAP]

Hi @mikel,
yes, I got the exact code. mmm🤔

[Fixed header on scroll with GSAP]

@ZachSaucier Hi Zach, I was playing with the requestAnimationFrame, using your demo js code. I keep having Uncaught ReferenceError: requestID is not defined. 
Any idea why? 

[Draw svg line on scroll]

@ZachSaucier no luck! I changed all plugins, you can see my demo I have an error, looks like the way MorphSVGPlugin loads is wrong 

[Draw svg line on scroll]

@ZachSaucier that happened when I updated the plug in.  With the previews GSAP was working fine. Any idea?

See the Pen PoogbEZ?editors=1010 by davide77 (@davide77) on CodePen

[Draw svg line on scroll]

@mikel @ZachSaucier
Guys, any idea why with the new GSAP3 the plugin MorphSVGPlugin is giving me this error?
 

pen.js:4 Uncaught ReferenceError: MorphSVGPlugin is not defined

 

[Draw svg line on scroll]

@mikel hi, thank you, yes helps a lot! 

 

I've managed to changes the timing of the balls manually. Is this the best way? 

See the Pen PoogbEZ?editors=1010 by davide77 (@davide77) on CodePen

 

[Draw svg line on scroll]

Thank you! I would rather fix this scroll path position firstly. Doesn’t feel right at all. No idea how to fix this. Really appreciate if you could help 

[Draw svg line on scroll]

As it starts, the animation, the first line on top, scrolls in a opposite direction, is quite odd.

I've changed the timing and looks much better, but still not quite sure I'm doing it right. 
Any suggestion?

See the Pen PooLgYd?editors=1010 by davide77 (@davide77) on CodePen

[Draw svg line on scroll]

Thank you so much! 
Looks much better! 
DO you know why the icons(balls) aren't showing correctly? and the first parth of the line is animating still in a opposite way?

See the Pen RwwdEXm?editors=1010 by davide77 (@davide77) on CodePen

[Draw svg line on scroll]

HI All,

I was hopping to grab some of your amazing brain as I need to make this animation work like a charm  

I have a line that should animate while scrolling down. I'm kind of there pretty much, but I have the line that animates in the opposite way!!!
 

So, line animates balls(icons)  animates with it. Anyone able to explain what I'm missing? 

Thank you for any help you can offer!!!
 

See the Pen ExxMdyp?editors=1010 by davide77 (@davide77) on CodePen

[GSAP auto height on a accordion functionality]

48 minutes ago, ZachSaucier said:

Hey DD77. 

 

Currently you can't tween to a value of "auto". Instead, you should use a .set() to the "auto" value then immediately use a .from() a value of 0.

 

However, you currently have some conflicting tweens. You're trying to close all of the options and then open the clicked one at the same time. You need to change your logic so that the tweens don't conflict.

 

Other notes:

• You don't need to use a jQuery selector in your tweens. By default selector strings are parsed using JavaScript's .querySelectorAll() method.
• You should avoid using jQuery's animate. Plus it doesn't work with GSAP's scrollTo plugin.

 

 

 

P.S. The next version of GSAP currently has a way to tween to a value of "auto" built in  

any reaso why the TweenMax.to(window, 1, { scrollTop: theOffset.top - 56 }); isn't working now? 

[GSAP auto height on a accordion functionality]

46 minutes ago, Shaun Gorneau said:

Hi @DD77

 

Heights are tricky! I've always found it easiest when tweening from 0 up to a non-specified height to immediately .set( element , {height: 0} ) and tween .from( element , {height: 0} )

 

Have a look here. Hope it helps!

 

 

 

Thank you so much!!!!!!

[GSAP auto height on a accordion functionality]

Hi YA,
I'm having so difficulties to make this functionality to work smoother and better. I need auto hight as my content is quite dynamic. 
When I click the height of the accordion fires but doesn't have and smoothens on the animation. What am I missing? 
Also is it done all ok overall? Would you change anything in there? 

Thanks,

D

 

$(".accordion-item .button").click(playAnimation);

  function playAnimation(event) {
    event.preventDefault(); 
     
    
    var $this = $(this).parent();
    var $thisContent = $this.find('.accordion-content .article');
    
    
    TweenLite.to($this,.3, {className: '-=expanded'});
    TweenMax.to($thisContent, .3,  {autoAlpha:0,ease: Sine.easeInOut,
        onComplete:function() {
            TweenMax.to($('.accordion-content .article'), .3, {height: "0",ease: Sine.easeInOut})
        }
    })
    
       if (!$this.hasClass('expanded')){
            var self = this;
            setTimeout(function() {
                theOffset = $(self).offset();
                $('body,html').animate({ scrollTop: theOffset.top - 56 });
            }, 310);

            TweenMax.to($(".accordion-item"), .3,  {className: '-=expanded', ease: Sine.easeInOut})
            TweenMax.to($this, .3,  {className: '+=expanded', ease: Sine.easeInOut})

            TweenMax.to($('.accordion-content .article'), .3,  {height: "0",autoAlpha:0, ease: Sine.easeInOut})
            TweenMax.to($thisContent, .3,  {height: "auto", ease: Sine.easeInOut,
            onComplete:function() {  
                TweenMax.to($('.accordion-content .article'), .3, {autoAlpha:1,ease: Sine.easeInOut})
            }
        })
       } 
     
  } 

 

See the Pen oNNzzNP?editors=1010 by davide77 (@davide77) on CodePen

[GSAP accordion expanding issue]

@mikel Sure, what's on line 26? is commented off! 

[GSAP accordion expanding issue]

Ok, managed to do it. what do you think?

 

 

See the Pen PMNaJg?editors=0010 by davide77 (@davide77) on CodePen

[GSAP accordion expanding issue]

@mikel thank to you. 

Please Mikel, would you be able to direct me on how to tooggle the parent "accordion-group"?  so I can close and open it? 

[GSAP accordion expanding issue]

@Mikel thanks, really helpful, this helped me a lot.
I'm not manages to:
- add class to parent "expanded"

-add function that move to top of the list the clicked element.

todo: make it better, smother and perhaps without a feeling that the clicked one jumps to the top.
@mikel what do you think? 

See the Pen oKxpJw by davide77 (@davide77) on CodePen

[GSAP accordion expanding issue]

@ZachSaucier I think i could achieve it with my setup.  
would you be able to help?