Juno911

BusinessGreen
  • Content count

    26
  • Joined

  • Last visited

Community Reputation

4 Newbie

About Juno911

  • Rank
    Member
  1. GSDevTools for two different timelines

    Sorri for asking so much questions about DevTool Element, but by now, its by far the most interesting thing to me, because if it works well, my job is done in half time. Wasnt that even something your site promises Please check my once more I have two issues here: 1.) In GSDevTools I state a very small timescale. But its not honored. The time-scale is displayed correctly in browser, but my new time-scale value is simply the new scale of 1. So whatever I write there its the speed of one and the label of my choice. Is this something I need to achieve with duration instead? But whats the usage of changing the timescale if each value has the same impact? I think I see sth wrong here.. 2.) The less fun part. I guess its has something to do again with this 2 seconds magic happening in the beginning. Sop here is the way to reproduce - start the pen - pause the timeline before 2 seconds are gone - refresh your browser what would u expect? Timeline at start position and if you hit play, its starts from 0. Right? And thats the case. - start the pen - pause in the middle (5 sec or so) - refresh your browser Something is different. Playbars Timeline is in 0 position, but GreenSocks Timeline starts to play from pos1 somehow. This is my question. Why? - start the pen - DO NOT PAUSE - refresh while timeline is running (after 5 sec or so) Now you have again the good picture. So the pause is somehow installing a fixed position. Doesnt matter where you stop. If it is later than that magic 2 seconds,. it always starts from a position I dont know who has configured it Can u find it out? Thanks a lot.
  2. GSDevTools for two different timelines

    Yes, I am already dealing with animation selectors. I changed that already in a way, that GVDevTools learn by script which tl is active. So this saves at least the time to switch the code, because jumping between timelines is otherwise no fun. I will try that display block hack later and let u know. In regard to the touch issue I like to take back my words :-). I had a working bar at MAC computer, but a "sticky" bar at all my phones and pads. But as I started to inspect after your message, the problem was gone. I am not totally sure, but since I am dealing with keyframes vor different screens,. it might happened, that I somehow moved or overlayered the touch part in a way that is was still visible, but not touchable anymore. Since it worked in the computer and since I never used GSDevTools in my real smartphone before, I simply thought that its not working. So sorry for a wrong report.
  3. Positioning with TextPlugin

    Ha, somehow I didnt come to the idea that the divs are appended to each other. I thought they will all be operated into the #messages div. However, you made the flow totally clear and from that I was able to develop another solution without absolute positioning, what I try to avoid whenever doable. Once the thing was clear after reading your words, it made click and it was clear that this is coming from the document flow, not from gsap tools. Thanks for shedding light here. Appreciate it a lot! I hope that I soon can share my gsap web project I am working on right now.
  4. Positioning with TextPlugin

    Hi, I have robbered some code from gsap examples and changed it to my purposes. However, something I do not understand with the positioning here. Each staggerFrom has the same yaxis description. Why do the following containers fall below the previous one? I mean this is want we want, but once I come to the part where I want to reset the yaxis back to 0, I must say, that I dont understand how the thing is going. If I clear all props, something bad happens. I dont want to reposition bu calculating the yaxis. I just want to say staggerFrom y:0 and expect to be positioned in zero. Not sure if the question is totally clear. So why to each textarray element falls below each other? And how can I say the third element (2pos) that it should start from the top of its div? Any help is much appreciated.
  5. GSDevTools for two different timelines

    I saw the GSDevTools Videos and I recognized everyone has a cooler player than me. Its because I am developing in mobile view. I have two issues here an a question if someone has an idea for a cool workaround. 1.) Working with GSDevTools in real smartphones is hard. Its somehow messy to touch it on iPhone 6/7/8. Its there, but you cant grab it. Sometimes it works, sometimes the control elements are no touchable. Mobile testing can be done well only in mobile telephones, hence a working devtool here would be the help of my life. 2.) Before we check in real phones, we checkout ff or chromes mobile view. Its working like a charme but a lot of nice features are gone, where just the play button and the timecontrol is left. No access to parallel timelines by ID, no chance to hit start and end markers. Is there a nice trick or even a known browser setting to have GSDevTools running in total without loosing mobile view on the screen? And for smartphones I have no idea how to approach. I mean who still uses computers? Instead of developers
  6. GSDevTools for two different timelines

    Awesome, I tested already both examples, the case with the ID from Craig, and the case from Jack and it literally does what I need to. The detailed description of Jack even brought up some new aspects I didnt see before. Thanks a lot for that. I saw another post which was talking about these 2 seconds thing. Others probably also experienced things like me. But somehow I didnt get the relation to my topic. But now its totally clear. Again THANKS
  7. GSDevTools for two different timelines

    Hey, thanks for reply. Actually the second part. Overall GSDevTools should always interact with the timeline I am playing. If I jump out the second into a third, it should reset again, showing the exact duration of timeline played. No other timelines should be controlled in that time, always just one is in focus. Think of three timelines played after each other, not concurrent. In a concurrent case I would prefer a global timeline. In a sequence, I prefer a control pane per timeline. The breakpoint is either a command when the previous timeline is stopped, or where the new one is started. I expected listing GSDevTools at each end of a timeline would lead into a kill of the first (either kill of timeline itself, at least control pane for timelines) and somehow it does in my codepen example. But only if I change to second timeline fast by hiting the button. If I wait to long, the same lines of code are doing different things. What I guess is coming from a wrong usage and not the tool itself. I hope things are a bit clearer now
  8. Hi, I have two timelines setup doing a great job. At the end of each timeline I have GSDevTools.create(). It first seems to work fine, e.g. wenn hit the button, the second timeline starts well. But the curious thing is, that if the first timeline runs for more than 5 seconds, the 2nd timeline GSDevTool Display is not okay anymore. Means the timeline lost 20 seconds somehow and when the play control is done, the animation is still running for 20 seconds or more. Any idea how to approoach to get two nice controllable timelines here, which display correct data? Thanks a lot
  9. staggerFrom issue with two after each other

    I solved that by clearing all props between the two staggerFrom commands
  10. Hi, please check my codepen. tl0 starts immediately and animates the background to yellow over 10 seconds. However, while the animation is going, please click the button. It will start tl1. It seems nothing happens, but at the bottom some strange vertical drawing is happening. But the staggerFrom commands are fine. If you load each staggerFrom alone (comment the other quickly) all is fine. With both. But if I use them in that order, they dont do after each other what they do in a standalone case. Any idea why this happens? Do I have to reset the SVG drawing somehow first? Thanks a lot!
  11. Thanks a lot. Text Plugin is my partner! It does exactly what I need, hence I will use it. The example page is nice, however, the CodePen examples are not running in my MAC Safari, Chrome or Firefox. Thats why I stopped to look into them and started to learn about Text Plugin. Again, thanks for the tipp! It is very welcome!
  12. Hey guys, my CodePen actually does what I want. But not in the way I want. Target: Have a transparent (background-less) text-string dialogue (actually monologue) in an absolute position... Challenge: ...without defining an absolute position, in one case with span, in other with div Look, I want more than one element appear in the same position. But since its not a image, the previous staggerelement needs to be removed first, because otherwise the text overlaps. Case div: A change to only the appearance (visibility, opacity, autoAlpha [where is the difference?]) wont help. Because each div takes space. I need to work with display none and block. But how can I tell a stagger to be displayed=none when the second stagger appears? My workaround with absolute position is bad. It even needs to span a background color, because the prev elem of course is still there, just underneath the other. Case span: A span is already an inline element. Thats nice. But it does not support background. What I anyway dont want. So here I look also for an option, to get, then send it away (of course not with a second tween or line of code). So I am looking for a pretty smart line of code. A single one which does the dialogue. Never with an absolute position, never with a background. In one case with div where I need to deal with display to ensure all is done in the same corridor. In other case with span, where I have no idea by now how to approach. I guess if the display thing is working with div, it will do the job with span as well, so one solution for both problems. Hopefully... Thanks for any help on this.
  13. DrawSVG just throws the graphic instead of draw it

    However, its working. I will try to start my second drawing, then I will see if this time all steps go right the first time. Do you maybe know a trick to embed svg smart into html? I read this post https://wiki.selfhtml.org/wiki/SVG/Einbindung (hope it changes the language to yours) and it said SVG can be embedded with <object> to let JS still be able to access the pathes. But this is not working. Whatever I do (img, background, embed, object) its just the static svg. Only inline svg makes the animation done. By now I get contents into php var and then simply echo in html. Because inline svg is really not an option. It makes no sense to see these files ever again after they work. Do you have any idea to use regular html technique to pull scg like a style or script?
  14. DrawSVG just throws the graphic instead of draw it

    Thats crazy, my new svg (which I took now from you codepen) has more lines that my one I recently copied. Is there maybe a codepen automat detecting suboptimal SVG and make it better? I really cant think of this without prompting something, but who knows.
  15. DrawSVG just throws the graphic instead of draw it

    ooh yeah, now I got it. And I immediately tested it. And my plugins loaded well. Now I made it run locally as well. Did you change anything to the codepens SVG? I copied from my local svg to codepen. You added js plugins and this did the job. Now I copied back codepens SVG to my local and it worked immediately, But the codepen SVG is from my local copy and I did no changes. Either code pen has a magic inside or something has changed. Do you know of something? Otherweise we can close the case, because finally things are working, even if I dont know why they work now and not before. That makes only sense in case of a SVG change. But who could have done that?