Blocs 3.2 Beta Build 3


#61

I agree, but I’m just pointing out the solution is not as simple as making a statement (if Apple can do it, why can’t Blocs).

The cause is the height of the text area, the trigger is set to show when a text element is half way on the screen, if it’s way bigger than screen height you get this. A way to avoid it, may be to break the chunk of text up into sections or paragraphs with the animations set on each. That avoids the tall text area size and should make the trigger area smaller.

Your statement reads like this effects anything and everything you use animation on. Can we be specific on what items this effects?


#62

Yes, of course, the issue appears on text and other items that are taller than the visible page/window/display-height. Breaking up items into multiple smaller items requires more work, which is undesirable, but I appreciate the recommendation about multiple shorter items as a workaround.


#63

I’ll see if I can handle taller items better. Is this scrollFX, Animations or both?


#64

ScrollFX only. (I’ve never been able to get Animations to work.)


#65

Hi @JDW @Norm,

I would have to agree with @JDW here. I often find myself removing the scroll FX (fade in) effects, because of this issue. I feel it the most when I am trying to take screenshots of my templates to include in marketing materials.

For example, I want to take a screenshot of the section with two images and text/social icons underneath in my Wedding template, and as you can see the text under the images appears way too late. It only appears fully, after the images begin to disappear. And it’s even worse on mobile. My hack with padding-margin works for most cases, but it’s not perfect.


Of course, the tip from @Norm on separating the effect across many sections of this text (ex, heading, paragraph, social icons) will definitely help a lot, but I can imagine some cases where it will be more difficult to do.

So, if it’s not super difficult to implement, I would be very happy if the fade in effect kicks in much earlier!

Cheers,
Eldar


#66

:exploding_head:

What happens when you start a fresh project add a bloc with text and then apply a Flip animation to the text.

• Do you see a preview of the animation in app once its applied?
• When you export do you see the animation in various browser (Chrome/Safari/Firefox)?


#67

First of all, its nice to see pics of the big day :wink:

Ok so scroll FX are triggered when the object is in the center of the screen, now my browser window is longer so this is what I see. My center point has more space above than yours.

Screen%20Recording%20(Claquette)

If you are viewing on a smaller screen the trigger is going to change. This is the complex part, you want the trigger to change for specific items on specific screen sizes (for you, the descriptive text does not show but for me on my screen size it does). If I change the calculation it will effect all objects for both of us.

A suggestion would be to add the ability to control when the effect starts, this is obviously more complex as it also needs to consider the surrounding elements that have scroll effects and also the screen height.

Im not saying it cant be done, or that I wont work on making it more reliable (I 100% will). Im just highlighting the fact nothing is simple when it comes to making complex tasks/effects easy to us and apply.

I don’t think tweaking the calculation will make much difference for this scenario, what is required is more controls on the scroll FX, leading to more complexity and unfortunately, the requirement of more time and knowledge from the user in order to apply these types of effects.

I’ll see what I can cook up, in the meantime I’ll see if I can tweak the calculation on mobile for a more reliable result.


#68

Thanks @Norm!

I agree that screen ratio also plays a big part here. I mostly test my sites on 16:10 screen, similar to most laptops, so the problem appears a bit bigger there. On a big screen, which I also have, I can just make the browser window more square (like on your video), and it will look better.

Anyway, I hope you find an easy way to improve this without taking too much time!

Cheers,
Eldar


#69

@Norm, per your request, I just opened Build3 and a new document. I added Structure 1 Column Center and then inside that a paragraph, and with that “P” selected in the left sidebar, I choose the following Animation:

Type: Appear on screen
Style: Flip
Speed: Normal
Delay: None
Loops: 1

When I preview, I see static text with no animations.

I then do an Export and double click the HTML file in the Finder which opens in Safari, but again I see static text only. Same in FireFox.

Again, I cannot get Animations to work on my 5K iMac running High Sierra. I’ve never been able to, even in earlier builds.

It’s the end of the day here in Japan, so if you post replies I will have a look at those tomorrow.

–James W.


#70

Thanks for trying that.

We can try to figure this out I now have 3 scattered reports of animation not working at all in Safari, Im wondering if it is a OS specific setting.


#71

Im interested to know do the animations on this page work for you?

https://daneden.github.io/animate.css/


#72

Really more difficult when you don’t understand what you all are talking about.
@Norm it kind of made sense the way you explained it. :slight_smile:
Maybe this is something you can add to your list @Eldar down the road.


#73

Well, when I click on that link and it first opens in Safari, I see animations that move the pieces of that web page into place – moving them up from the lower part of the page. However, no matter what I choose in that popup menu, when I then click that Animate It button, nothing happens. Reloading that page make it animate again though. I also tested in FireFox, but it too has the same problem. I then tested in Chrome, and then the animations work when I click the button! So Chrome has something that FireFox and Safari don’t, I guess. But I prefer Safari, like most Mac users. Thoughts?

@Norm I STRONGLY support the hard work that will be required to make FADE work properly. Again, FADE is critical to modern web design and the timing of which is equally critical. The world’s greatest effect badly timed make it the worse effect of all because when something works badly, we tend to leave it turned off.

Thanks,

James W.


#74

Hello @JDW I could recreate your problem, and I think I found the solution…

Check this Video I have done.

Hope it is the same problem…


#75

Great feature whereby you can click outside of a Modal popup to go back to the main screen - very intuitive :+1:

EDIT: Actually, can I use a button to close the popup? I’ve been linking back to the originating page but that reloads it


#76

@Highlander,

Try the demo of the modal that @Norm send with the Beta 4, then choose the button inside the modal and change the “Interactions” > “Type” to None.

Then go to bottom and in the “Custome Atributes” add the following one:

Name: data-dismiss
Value: modal

And try, it will work for me…


#77

Thank you for the video, but that is not a solution because I already have Javascript ENABLED in Safari. I also have it enabled in FireFox too, and neither FireFox nor Safari will display the animations.


#78

Someone’s been reading the bootstrap docs :pray:


#79

This is definitely a preference or an another plugin/app causing this. I’m going to keep looking for a possible cause.

It’s good to know the actual animation framework is not working for you, which means it’s not specifically Blocs.

Do you have anything installed in the browser?


#80

In Safari, I have the following Extensions installed:

  • Amazon Assistant
  • Ebates Cash Back
  • 1Password
  • AdBlock Engine

All the latest versions. But even if I untick all of their checkboxes and then reload the page in Safari, it still doesn’t work.

In FireFox I have the following installed:

  • 1Password
  • Folx
  • ImageBlock

But even when I DISABLE all of them and load the test site, the animations do not work. I also tested in a Private window but the animations still don’t work.

–James W.