TartufoDAlba
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by TartufoDAlba
-
-
I was wondering if it would be possible as per the example to:
1. Drag the .inner-box while using the "#outer-box" as a guide. Basically making it so the .inner-box is moved around by the same x,y that happens on the "#outer-box"
2. Keep the bounds where if the "#outer-box" when the ".inner-box" reaches the "#outer-box" bounds.
(To note: my pen is obviously off, and the "#outer-box" i am not trying to make drag around. Only ".inner-box" would drag around and stop when it has reached the edge of the "#outer-box")
The overall goal is to make ".inner-box" draggable even when you are not clicking directly on the div.
See the Pen BYxKWL by tartufodalba (@tartufodalba) on CodePen
-
12 minutes ago, Jonathan said:
When i say SVG elements, i mean the children of the <svg> element.. for example <rect>, <circle>, <g>, etc..
The parent of the <svg> element (which could be a DOM element like a <div>) and the main <svg> parent itself can use display: none, just not those SVG child elements within the <svg> element. Those shouldn't use display:none due to the way display and visibility works with <svg> children, making them be removed from the render tree based on the SVG spec display.
Happy Tweening
I had made another pen for FF, just to be sure I understood. It still seems that even when the parent has the "display: none" and the SVG does not, it still does not function properly (In FF).
But I also may have mis-understood the explanation... so i provided the pen just in case.
See the Pen jLBbPq by tartufodalba (@tartufodalba) on CodePen
-
9 hours ago, GreenSock said:
Yeah, Firefox has some odd quirks in cases like this. We've already worked around a bunch of them in GSAP, and I just added another in the upcoming 1.20.3 release which you can preview (uncompressed) at https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/TweenMax-latest-beta.js - that seems to work great in your demo. Let me know if it looks good to you as well please.
Hi, I tested it and it works perfectly. Great to see that issue was solved.
Thanks!
4 hours ago, Jonathan said:Hello @TartufoDAlba
You should be using CSS visibility: hidden or the SVG visible attribute to hide your elements, since when an SVG child element has display none it is removed from the render tree, and will throw that error.
Previously Firefox would throw a NS_Error_Failure error. But opted to match other browsers like Chrome and MS Edge., and throw null for ownerSVGElement.
See this Mozilla bug report regarding why Firefox throws null instead of NS_Error_Failure for ownerSVGElement.
https://bugzilla.mozilla.org/show_bug.cgi?id=835048
Based on spacing issues of how it would still show the spacing with "visibility: hidden", the parent divs of these SVGs really do have to be "display: none". I will keep in mind the rest though. Thanks!
-
3 minutes ago, PointC said:
Could you use visibility:hidden, opacity:0 or autoAlpha:0?
Happy tweening.
The issue is is that the physical arrow is inside a larger div that is set to display: none. (i just tried to make the minimal version for an example)
I guess I could always call that effect as each arrow appears also. Just wondering if there may be a quicker/simpler solution.
-
Please check codepen example in FF.
I was able to isolate the issue. Where if the SVG element is set to "display: none" it will throw an error. (i guess because it doesn't exist in the DOM)
The issue is i have 10 of these arrows on another page. And 9 of them are set to "display: none". Then later in the scene they will begin to show.
Is there any kind of work around in FireFox to fix this?
See the Pen jLyavG by tartufodalba (@tartufodalba) on CodePen
-
I ended up using your (Carl's) method, Thank you! Then adding the click turning off/on. Here is the final pen just for information purposes if it's searched:
See the Pen eRrGbo?editors=1111 by tartufodalba (@tartufodalba) on CodePen
-
2
-
-
13 minutes ago, mikel said:
Hi TartufoDAlba,
If you make a short demo with separated timelines showing what your purpose is I´ll have a look.
Thank you, overall the 2nd pen I posted (linked again), shows the basic behavior which intertwines with the 1st post. I'm not to sure if there is a cleaner way to do it. In the pen i provided you will see if you continue to click "play-me" it disables the click until the opposite timeline completes. This is the goal:
- Button "play-me" shares 2 timelines
1. Click button "play-me" to play "timeline 1" (box height)
2. Disable button "play-me" until "timeline 1" is finished
3. Re-Enable button "play-me" when timeline 1 is finished
4. Click button "play-me" to play "timeline 2" (make box red)
5. Disable button "play-me" until "timeline 2" is finished
6. Re-Enable button "play-me" when timeline 2 is finished
and so on in a loop
The point being, not allow the other timeline to play on click until the opposite timeline is finished.
See the Pen GExagq by tartufodalba (@tartufodalba) on CodePen
-
7 minutes ago, mikel said:
Hi TartufoDAlba,
to toggle your menu by GreenSock could be easy and clean:
Look at the docs: https://greensock.com/docs/TimelineMax/reverse()
Thank you for the input and nice clean example, I am aware that you're able to reverse it much cleaner. In my broken down codepen I indeed see how it could suggest that "reverse" would be a workable method for what I'm trying to achieve there.
But in my full site I literally have 2 fully separated timelines... both of which are very different and timeline2 not being the reverse of timeline1.
That is why it is important that they are able to fire separately, not in reverse nor "on top" of each other.
-
I was able to put something together without using .isActive(), I may not have been using it correctly. I have updated my "solution" here if anyone stumbles up it.
See the Pen GExagq?editors=1111 by tartufodalba (@tartufodalba) on CodePen
-
My goal of this pen, is to make it so that you can continue to "open and close the menu". Where each action (open/close) has to wait for the other timeline to finish before it can start again.
My issue is I understand that after ".play()" the timeline is at the ending, leaving no timeline to restart. But if i use ".restart()" in these instances, it just restarts the first timeline.
Any help would be most appreciated.
See the Pen GExeJQ by tartufodalba (@tartufodalba) on CodePen
-
What would happen if you per-say wanted to remove multiple timelines from a master timeline?
I can see based on the explanation, why if you "remove 1st" + "remove 2nd", it would keep push "5" and "6" to play at the same time.
Would there be a way to build it where both are true:
1. Option of removing multiple parts from the master timeline and have it shift correctly (Remove 1st + Remove 2nd + Play)
2. Option removing only 1 part of the timeline (Remove 1st + Play) < which technically works on its own.
Where because different users may choose a different "path" 1 or 2, both options would be available to the same timeline.
See the Pen eRYNya by tartufodalba (@tartufodalba) on CodePen
-
3 minutes ago, PointC said:
That's because of the 3rd parameter in the shiftChildren() method -- ignoreBeforeTime. From the docs:
ignoreBeforeTime : Number
(default = 0) — All children that begin at or after the startAtTime will be affected by the shift (the default is 0, causing all children to be affected). This provides an easy way to splice children into a certain spot on the timeline, pushing only the children after that point back to make room.
As you have it right now, that parameter is set to the duration of t3 which is 1 second. That is telling the tweens that start at or after 1 second to shift. That means t2 moves by 1 second and starts at the same time as t1 which is why you see two timelines play at once. What you want in this case is the tweens that start after two seconds to shift. If you switch your code to reflect that change, it should work as expected.
master.shiftChildren(-t3.duration(), false, 2);
Hopefully that makes sense and helps a bit.
Happy tweening.
Great thought out explanation, thank you again! This forum really helps to make the learning curve smoother and your help is appreciated.
Here is the updated pen for this thread that works with your applied suggestion:
See the Pen MoWwez by tartufodalba (@tartufodalba) on CodePen
-
1
-
-
I'm now getting some behavior that is making me question if I fully grasp the "shiftChildren()" method.
If now I take the "fixed" pen (2nd in this thread), make it so each timeline (t1, t2, t3, t4) has the exact same total time (of 1 second each) it creates a different output.
I now receive unexpected behavior where 2 timelines play at the beginning (at the same time) + seems to skip over the "t3 shift Children()":
See the Pen PjowaN by tartufodalba (@tartufodalba) on CodePen
-
6 minutes ago, PointC said:
It sounds like you're looking for the shiftChildren() method. That will allow you to close the gap from the animation that was removed.
https://greensock.com/docs/#/HTML5/Animation/TimelineMax/shiftChildren/
Here's a thread with almost the exact same question.
Hopefully that helps. Happy tweening.
You're right on the money!
Thank you.
Here is working update in cause anyone stumbles onto this:
See the Pen QgLmPE by tartufodalba (@tartufodalba) on CodePen
-
5
-
-
My goal is trying to fully remove t3 timeline from master timeline.
"master.remove(t3)" seems to be removing it from the master timeline, minus a time gap.
It causes a small gap between t2 and t4 playing, where i would like to find a way to eliminate that time gap by fully removing t3.
See the Pen RgbMLe by tartufodalba (@tartufodalba) on CodePen
-
Hello TartufoDAlba,
To add to all the great advice that has been posted in this topic...
In my opinion, the GSAP add() method is best used when your adding child timelines to a parent timeline.
Carl shared that great tip, a long time ago in a galaxy far far away. That would be one of the easiest tips to remember about using the GSAP add() method.
Then by creating those child timelines they can be reused or added to other master timelines, or when needed in any event handlers.
// create master timeline in a paused state var masterTL = new TimelineMax({paused:true}); // create 1st child timeline function timeline1() { var tl = new TimelineMax(); tl.to("#foo", 1, { x: 100 }); return tl; } // create 2nd child timeline function timeline2() { var tl = new TimelineMax(); tl.to("#bar", 1, { y: 100 }); return tl; } masterTL .add(timeline1()) // add child timeline1 to master timeline .add(timeline2()) // add child timeline2 to master timeline .play();Again you don't have to create your animations this way, but it is recommended to simplify the creation of various child timelines and will give you full control when you add them to your master timeline or in any event handlers you setup.
Just to add my two cents
Resources:
GSAP add(): https://greensock.com/docs/#/HTML5/GSAP/TimelineMax/add/
I would also mark this thread solved with this answer also if I could. Thank you for the input. It is great that you can keep the code clean and re-use areas instead of copying and pasting the same thing over and over.
-
2
-
-
The main thing about this project is it is not using a single master timeline.
It is basically a "choose your own adventure" with multiple timelines. Where different timelines end up sharing partial elements and can each end up at the same location. This is why I had them separated and not into a single master timeline.
I appreciate all the input and will be going through each post step by step. Thank you!
-
HI TartufoDAlba
Looks to me like you're dealing with an overwrite situation. You're trying to add the same timeline to 3 parents so the third one overwrites the other two. That's why your first demo works correctly if you hit button 3.
The easiest thing to do would be putting that scaleme timeline into a function and call it onComplete from the other timelines.
Hopefully that helps.
Happy tweening.
Yes I see what you mean thanks.
What if per-say I wanted to call/play "scalme" in the middle of the 3 other timelines?
(where I don't believe onComplete would work since it would no longer be just on completion)
-
Hello Gsap'ers,
I have attached 2 code pens:
1.
As you can see by this pen 3 timelines share the play function ".add(scaleme.play())".
This "should" initiate timeline "scaleme" at the end of their corresponding timeline(s).
I noticed that with a multiple timelines sharing the ".add(scaleme.play())" function it will not play.
2.
See the Pen EmYGYK by tartufodalba (@tartufodalba) on CodePen
As you can see on this one I removed ".add(scaleme.play())" from playme2, playme3.
And then if you click "playme1" (red box) the "scaleme" timeline properly executes.
Is there anyway to properly implement this so that the timelines in the first codepen each can share that play button?
Thank you
See the Pen bWbQmj by tartufodalba (@tartufodalba) on CodePen
-
Thank you for the clarification. Yes I that makes sense and I will give it a try.
Thank you!
-
1
-
-
Hello GSAPers,
Would it be possible so that before the timeline is finished... the beginning of the timeline is already repeating?
In the pen for example:
"#line1" and onward into the timeline would already be repeating before "#line6" is completed.
Thus making it so the timeline appears continuous and not have a "blip" of white background before the next repeat.
Thank you!
See the Pen OWrmLx by tartufodalba (@tartufodalba) on CodePen
-
Hello I am new to the forum,
I am having issues hiding the SVGs in this pen on load.
The timeline repeats itself properly, but I can't seem to execute it properly off the bat. Each SVG is shown until the timelines runs through.
See the Pen PWBQBw by tartufodalba (@tartufodalba) on CodePen
Draggable: Using outside box to drag inside box
in GSAP
Posted
Yep that is it! I managed to glance over the trigger info in the docs. Simple and clean, thank you!