Safari bug: _next & _prev

[ryanpwaldon 2 Likes (Newbie)]

Hi guys,

I'm running into an issue on Safari with a function I've created that uses the _next, and _prev  properties on a tween object.

Here's the code:
 

const copy = new SplitText('.copy-' + i, {type:'chars, words', charsClass:'chars'})

tl.staggerTo(copy.chars, staggerDuration, {onStart: caretForward, onStartParams: ['{self}']}, staggerDuration, label)

function caretForward(tween) {
  if (tween._prev) {
    TweenMax.set(tween._prev.target, { borderRight: 'none' })
    // this removes the caret for the previous character
    // tween._prev is always null when called in Safari
  }
  TweenMax.set(tween.target, { autoAlpha: 1, borderRight: borderStyle })
  // this adds the caret for the current character
  if (tween._next === null) {
	// tween._next is also always null when called in Safari
    blink(tween.target)
  }
}

I'm creating a typewriter effect whereby the caret is created (by adding a borderRight to the character) in the onStart callback, and subsequently removed using the _prev property in the following tween.

This works in every browser (including IE), however the _prev property seems to be always 'null' in Safari.

Does anyone have any ideas on what could be causing this?

Any help would be greatly appreciated!
 

Thanks,
Ryan

[Jonathan 5,176 Likes (Superhero)]

Hello @ryanpwaldon and welcome to the GreenSock Forum!

 

That will be pretty hard to debug without code we can test in an editable environment like codepen. Here is a page on how to create a codepen demo example: https://www.youtube.com/watch?v=g13vpXbs34I

 

But here are 2 codepen examples of a different approaches to a GSAP typewriter effect:

 

See the Pen LbPNvK by jonathan (@jonathan) on CodePen

 

And a slightly different way to do a typewriter effect in GSAP:

 

See the Pen avXdvw by jonathan (@jonathan) on CodePen

 

Happy Tweening!

[Carl 9,066 Likes (Superhero)]

Hi and welcome to the forums.

 

a function I've created that uses the _next, and _prev  properties on a tween object

 

Those are private properties that are intended only for internal use. As such they are not documented or supported.

It is strongly advised that you don't tap into these types of properties as its totally possible that we could change them at any time and your app would stop functioning.

 

Please provide a reduced test case as Jonathan has suggested, it would help if you think you found a legitimate bug.

Also, once we see what you are trying to do we can most likely suggest an approach that does not rely on these private properties.

 

[ryanpwaldon 2 Likes (Newbie)]

Thanks for the quick responses!

No worries, I was in a bit of a rush at the time and I left quite a lot out.

I've made a reduced version on codepen, although unfortunately I could not replicate the issue (this seems to work fine in Safari). Nevertheless, I've attached the pen below for reference.
 

See the Pen rvzrYm by ryanpwaldon (@ryanpwaldon) on CodePen

 

Despite of this, I have been able to replicate the issue by uploading my entire build to codepen. You'll see this works fine in most browsers, although the carets are not removed after being typed in Safari due to the explanation in my prior comment. I completely understand that this will be hard to debug, although if you want to check it out I've attached it below. For reference, the typewriter is called on lines 68, and 83-86; and the typewriter functions can be found between lines 107-116.
 

See the Pen JvyZOK?editors=1010 by ryanpwaldon (@ryanpwaldon) on CodePen

In all honesty, a work around should be fairly straight forward, I was just thinking it would be nice if I could make my code a little bit more lean (I now understand it's not the greatest idea to do it this way). 

Also, thanks for the suggestions Jonathan! This will be part of a dynamic banner (with dynamic text) that will have to wrap, and account for line breaks, hence why I went for a custom solution.