[Debouncing on scroll, on touch and on resize for infinite rotator]

Hi,

I have an infinite rotator which has click events on icons.

I have a problem on devices. On scroll something's wrong, it appears that I have a refresh for timeline.

Is this about debouncing?

Thanks!

[How to add tweens and functions to a timelineMax at the same time?]

Hi,

What is the right code to add tweens and functions to a timelineMax at the same time?

Thanks!

[DrawSVG with variables instead of values]

Thank you very much!

Problem solved! 

[DrawSVG with variables instead of values]

Hi,

I've tried to create a codepen but I don't have access to all plugins.

The code is long in JS, a lot of variables, tweens and functions.

I've created in JS groups and masks. The problem is drawSVG plugin doesn't work on elements created by me in JS.

DrawSVG works only on existing element.

See the Pen BrZKGJ by ZenTao (@ZenTao) on CodePen

See the result:

 

[DrawSVG with variables instead of values]

Yes, I need multiple dashed circles and masks. In html I have only one circle and one mask, but I've create and appended them in JS.

The problem is drawSVG plugin animate only one circle (the already existing in html).

Sorry, I can't show a link to the project!

Thanks again!

[DrawSVG with variables instead of values]

Hello again,

 

To get this stroke for the rotator I've used in html multiple circles inside svg element and after I've used drawSVG plugin to obtain the right stroke.

Now, I want to create and append elements and masks with jQuery and after to animate them with drawSVG plugin.

I've created the elements but I couldn't animate them! Only the original element is animated.

Can anybody help me, please?

 

The mark-up:

 

<svg version="1.1" class="svg-rotator" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 500 500">
            <defs>
                  <mask id="theMask1">
                         <circle class="reveal1" r="250" fill="none" cx="250" cy="250" stroke="#fff" stroke-width="6"/>
                  </mask>
            </defs>

            <g class="maskReveal" mask="url(#theMask1)">
                  <circle class="circle" cx="250" cy="250" r="250" fill="none" stroke="#ccc" stroke-width="6" stroke-dasharray="6"/>
            </g>

</svg>

 

Code in JS:

 

var recentDesf = $(svgRot).find("defs");

                for (var i = 2; i < rotatorLiSize + 1; i++) {
                    var newGroup = $("<g class='maskReveal' mask='url(#theMask"+i+")'><circle class='circle' cx='250' cy='250' r='250' fill='none' stroke='#ccc' stroke-width='6' stroke-dasharray='6' /></g>");
                    svgRot.append(newGroup);

                    var newMask = $("<mask id='theMask"+i+"'><circle class='reveal"+i+"' r='250' fill='none' cx='250' cy='250' stroke='#fff' stroke-width='6' /></mask>");
                    recentDesf.append(newMask)
                }

 

 

TweenMax.set($(this).closest(".top-side").find(".reveal" + idListItem), {
                        drawSVG: start + "%" + " " + end + "%"
                    });

 

Thanks a lot!

 

[DrawSVG with variables instead of values]

Hello everyone,

Thanks for your help!

My rotator looks nice now!

All the best!

[DrawSVG with variables instead of values]

Hi PointC,

I thank you for help!

It doesn't help a mask into my project, because I can change the background and the rect element has fill: #fff;

[DrawSVG with variables instead of values]

Hi,

I have a rotator and I want to draw a dashed stroke between icons.

How can I keep the dashed stroke with drawSVG plugin?

And, how can I use variables instead of values to get stroke only between icons?

I need something like this:

TweenMax.set(circle, {drawSVG:"variable1 variable2"});

How can I use modifier plugin for this?

Thanks!

 

[CSSRulePlugin doesn't work with TimelineMax]

Hi,

I have this problem on all browsers.

See the link, please!

https://catalin.devsaverr.com/para-open.htm

[CSSRulePlugin doesn't work with TimelineMax]

I've tried again. The plugin doesn't work! In console returns "Cannot tween a null target." And, for these: console.log(sectionBefore); and console.log(sectionAfter); return undefined!

Can anybody help me with this, please?

Thanks!

[CSSRulePlugin doesn't work with TimelineMax]

Hi,

I've downloaded TweeMax, TimelinMax and CSSRulePlugin. Are these enough for this code?

 

var openSection = $(".bcg-open");

 

        if (openSection.length) {
            var sectionBefore = CSSRulePlugin.getRule(".bcg-open:before"),
                sectionAfter  = CSSRulePlugin.getRule(".bcg-open:after"),
                tl            = new TimelineMax({delay:1, repeat:-1, yoyo:true, repeatDelay:2});

            tl
            .to(sectionBefore, 1, {cssRule: {scaleY: 0}}, 'open')
            .to(sectionAfter, 1, {cssRule: {scaleY: 0}}, 'open');
        }

 

Can anybody help me, please?

Thanks!

[ScrollMagic and ScrollToPlugin]

It's not about text animation. The next section starts with some delay on scroll. Only in IE.

[ScrollMagic and ScrollToPlugin]

On 2/27/2018 at 11:52 PM, Visual-Q said:

I'm not sure I understand the problem however...

 

If you mean this pen, there is a 0.5s delay on the text animation. If that's what you're refering to, remove it and it will fire at the same time as the silde animation.

 

Though I think you may mean something else as this has nothing specifically to do with IE.

It's not about text animation. The next section starts with some delay on scroll.

 

See the Pen NywvGp by Visual-Q (@Visual-Q) on CodePen

 

 

[ScrollMagic and ScrollToPlugin]

Hi everyone,
I have an issue in ScrollMagic.
I'm interesting in to find if somebody discovered the same issue.

I want to have the same effect on scroll like on the link below.

See the last codepen on this link: 

The plugin reacts instantly on window, on scroll, but on a container has a delay of ~0.5s, only on Internet Explorer.
Can anybody explain this?

[Parallax with GSAP and ScrollMagic]

Hi PointC,

I've tried to do this, but doesn't work. Actually, I want to animate the background of a section on scroll not to have a smooth scroll for entire page.

I've spent a lot of time to get this effect, but for nothing! I'm desperate.

Thanks for help!

[Parallax with GSAP and ScrollMagic]

Hi,

I want to develop a parallax effect width GSAP and ScrollMagic.

I need an effect like this: http://digitalzoomstudio.net/previews/parallaxer/

I need effect on every scroll wheel.

Can anybody help me?

Thanks!